<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>木木木木木 &#187; 代码高亮</title>
	<atom:link href="http://immmmm.com/tag/%e4%bb%a3%e7%a0%81%e9%ab%98%e4%ba%ae/feed" rel="self" type="application/rss+xml" />
	<link>http://immmmm.com</link>
	<description>不问明天，悠然浪费</description>
	<lastBuildDate>Mon, 21 May 2012 12:03:57 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.2</generator>
		<item>
		<title>WordPress 代码高亮插件：WP-Syntax</title>
		<link>http://immmmm.com/wordpress-plugins-wp-syntax.html</link>
		<comments>http://immmmm.com/wordpress-plugins-wp-syntax.html#comments</comments>
		<pubDate>Fri, 25 Dec 2009 04:33:52 +0000</pubDate>
		<dc:creator>林木木</dc:creator>
				<category><![CDATA[折腾无休]]></category>
		<category><![CDATA[WordPress插件]]></category>
		<category><![CDATA[代码高亮]]></category>

		<guid isPermaLink="false">http://immmmm.com/?p=1238</guid>
		<description><![CDATA[代码高亮插件很多，孰好孰坏也不是木木说了算，今就推荐俺在使用的：WP-Syntax 一、基础使用： 1.安装：后台-插件-安装新的插件-搜索“WP-Syntax”，点击安装；或到官方下载，上传至“wp-content/plugins/”内，然后开启。 2.使用：编辑文章时，选择HTML模式下，插入 &#60;pre lang=&#8217;LANGUAGE&#8217; line=&#8217;1&#8242;&#62; This is code! &#60;/pre&#62; (引号为半角！代码高亮插件高亮不来自己的代码，杯具……) 其中lang=”内为高亮代码的种类，我较常用的php、css和javascript都支持，当然WP-Syntax支持可不止这些（更多）；line=”内的数值是行数，可删可留。 至此，插件就已经可以完全正常使用了！下面还是来一些折腾： 二、进阶折腾： 1.修改默认显示字体：打开“wp-syntax/geshi/geshi.php”，修改“monospace”为想要的字体： 441 442 &#160; var $overall_style = 'font-family:monospace;'; 2.调整默认样式表：打开“wp-syntax/wp-syntax.css”，清空然后添加： &#160; .wp_syntax &#123;color:#100;background-color: #f9f9f9;margin:1em;overflow:auto;&#125; &#160; .wp_syntax table&#123;border-collapse: collapse;&#125; &#160; .wp_syntax div, .wp_syntax td &#123;vertical-align: top;padding: 2px 4px;&#125; &#160; .wp_syntax .line_numbers &#123;text-align: right;background-color: #def;color: gray;overflow: visible;&#125; &#160; .wp_syntax pre&#123;font-size:12px;margin:0;width:auto;float:none;clear:none;overflow:visible;word-wrap:break-word;line-height:1.5;white-space:pre;&#125; 3.为了优化我们也可以把样式合并到主题style.css中，打开“wp-syntax/wp-syntax.php” 159 160 &#160; [...]]]></description>
			<content:encoded><![CDATA[<p>代码高亮插件很多，孰好孰坏也不是木木说了算，今就推荐俺在使用的：<strong><span style="color: #3366ff;">WP-Syntax</span></strong></p>
<p><strong>一、基础使用：</strong></p>
<p>1.安装：后台-插件-安装新的插件-搜索“WP-Syntax”，点击安装；或到<a href="http://wordpress.org/extend/plugins/wp-syntax/">官方下载</a>，上传至“wp-content/plugins/”内，然后开启。</p>
<p>2.使用：编辑文章时，选择<strong><span style="color: #ff0000;">HTML模式</span></strong>下，插入</p>
<p>&lt;pre lang=&#8217;LANGUAGE&#8217; line=&#8217;1&#8242;&gt; This is code! &lt;/pre&gt;  (引号为半角！代码高亮插件高亮不来自己的代码，杯具……)</p>
<p>其中lang=”内为高亮代码的种类，我较常用的php、css和javascript都支持，当然WP-Syntax支持可不止这些（<a href="http://wordpress.org/extend/plugins/wp-syntax/other_notes/">更多</a>）；line=”内的数值是行数，可删可留。</p>
<p>至此，插件就已经可以完全正常使用了！下面还是来一些折腾：</p>
<p><span id="more-1238"></span><strong>二、进阶折腾：</strong></p>
<p>1.修改默认显示字体：打开“wp-syntax/geshi/geshi.php”，修改“monospace”为想要的字体：</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>441
442
</pre></td><td class="code"><pre class="php" style="font-family:Microsoft Yahei;">&nbsp;
    <span style="color: #000000; font-weight: bold;">var</span> <span style="color: #000088;">$overall_style</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">'font-family:monospace;'</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>2.调整默认样式表：打开“wp-syntax/wp-syntax.css”，清空然后添加：</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:Microsoft Yahei;">&nbsp;
<span style="color: #6666ff;">.wp_syntax</span> <span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#100</span><span style="color: #00AA00;">;</span>background-<span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#f9f9f9</span><span style="color: #00AA00;">;</span>margin<span style="color: #00AA00;">:</span><span style="color: #933;">1em</span><span style="color: #00AA00;">;</span>overflow<span style="color: #00AA00;">:</span><span style="color: #993333;">auto</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
&nbsp;
<span style="color: #6666ff;">.wp_syntax</span> table<span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">border-collapse</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">collapse</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
&nbsp;
<span style="color: #6666ff;">.wp_syntax</span> div<span style="color: #00AA00;">,</span> <span style="color: #6666ff;">.wp_syntax</span> td <span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">vertical-align</span><span style="color: #00AA00;">:</span> <span style="color: #000000; font-weight: bold;">top</span><span style="color: #00AA00;">;</span>padding<span style="color: #00AA00;">:</span> <span style="color: #933;">2px</span> <span style="color: #933;">4px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
&nbsp;
<span style="color: #6666ff;">.wp_syntax</span> <span style="color: #6666ff;">.line_numbers</span> <span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">text-align</span><span style="color: #00AA00;">:</span> <span style="color: #000000; font-weight: bold;">right</span><span style="color: #00AA00;">;</span>background-<span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#def</span><span style="color: #00AA00;">;</span>color<span style="color: #00AA00;">:</span> <span style="color: #993333;">gray</span><span style="color: #00AA00;">;</span>overflow<span style="color: #00AA00;">:</span> <span style="color: #993333;">visible</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
&nbsp;
<span style="color: #6666ff;">.wp_syntax</span> pre<span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span><span style="color: #933;">12px</span><span style="color: #00AA00;">;</span>margin<span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span>width<span style="color: #00AA00;">:</span><span style="color: #993333;">auto</span><span style="color: #00AA00;">;</span>float<span style="color: #00AA00;">:</span><span style="color: #993333;">none</span><span style="color: #00AA00;">;</span>clear<span style="color: #00AA00;">:</span><span style="color: #993333;">none</span><span style="color: #00AA00;">;</span>overflow<span style="color: #00AA00;">:</span><span style="color: #993333;">visible</span><span style="color: #00AA00;">;</span>word-wrap<span style="color: #3333ff;">:break-</span>word<span style="color: #00AA00;">;</span>line-<span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">1.5</span><span style="color: #00AA00;">;</span>white-space<span style="color: #00AA00;">:</span>pre<span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span></pre></div></div>

<p>3.为了优化我们也可以把样式合并到主题style.css中，打开“wp-syntax/wp-syntax.php”</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>159
160
</pre></td><td class="code"><pre class="php" style="font-family:Microsoft Yahei;">&nbsp;
<span style="color: #666666; font-style: italic;">//add_action('wp_head', 'wp_syntax_head');</span></pre></td></tr></table></div>

<p>在159行前加上“//”，取消加载插件自带的样式，然后把CSS样式写进主题style.css中保存即可！</p>
<p>4.后台编辑器中添加按钮，下载 <a href="https://dl-web.dropbox.com/u/837457/quicktags2-9.7z">quicktags2-9.7z</a>，解压后替换“wp-includes/js/quicktags.js”即可。具体使用方法及代码详情见 <a href="http://www.evlos.org/2009/12/22/add-syntax-button-to-edit/">http://www.evlos.org/2009/12/22/add-syntax-button-to-edit/</a></p>
<p>好了，就是这些！以后插入代码可就方便咯，另提醒：插入代码后不要随便切换编辑模式，因为由“HTML”进入“可视化”部分代码会被WordPress自动转换！</p>
<p>最后，祝大家都过个幸福的圣诞节！</p>
]]></content:encoded>
			<wfw:commentRss>http://immmmm.com/wordpress-plugins-wp-syntax.html/feed</wfw:commentRss>
		<slash:comments>133</slash:comments>
		</item>
	</channel>
</rss>

