Syntax Highlighter – 免插件实现WP文章代码高亮

SyntaxHighlighter是一个非常不错的代码高亮工具，支持各种平台，只需要前台载入代码即可。这里顺便放出一个比较漂亮的美化版。

版本比较旧，2.0.320版本的，但个人认为好用就够了。这版本是单个JS文件支持大部分语言的，不像官方版本要单个语言单个JS调用的，方不方便就见仁见智了。

1.下载必要文件

所有必需的文件我已经打包好了，点此下载

然后，如果你懂CSS，可以修改包内shThemesDefault.css，改成自己喜欢的样式。默认样式的示例如下：（美化样式代码来自M4）

在shThemeDefault.css第一行

.syntaxhighlighter {margin: 0 0 14px 0;background-color: #F7F7F7 !important;}

中追加一个

.syntaxhighlighter {margin: 0 0 14px 0;background-color: #F7F7F7 !important;word-wrap: break-word;}

可阻止代码溢出

2.上传

在主机主目录新建一个名为code的文件夹（别的路径也没问题，注意代码修改下），然后把压缩包里所有文件放到code目录里。

3.调用

复制下面的代码到主题的footer.php（header也没关系，只要能载入就行）

<script type="text/javascript" src="http://ben-lab.com/code/shCore-min.js"></script>
<script type="text/javascript" src="http://ben-lab.com/code/shBrushAll-min.js"></script>
<link type="text/css" rel="stylesheet" href="http://ben-lab.com/code/shThemeDefault.css" />
<script type="text/javascript">
SyntaxHighlighter.config.clipboardSwf = 'http://ben-lab.com/code/clipboard.swf';
SyntaxHighlighter.config.toolbarItemWidth = 16;
SyntaxHighlighter.config.toolbarItemHeight = 16;
SyntaxHighlighter.all();
</script>

（把上面ben-lab.com改成自己的域名）

那么，现在要怎么发代码呢，

按照这样的格式贴代码，就能在前台看到效果了

<pre class="brush:php;"></pre>

4.设置

有两种方法，一种是直接调整所有代码高亮块，另一种是单个调整。这里先给出所有配置项的列表及内容：

SyntaxHighlighter.config 全局配置，不支持单个代码块的调整

名称	默认值	介绍
bloggerMode	false	如果博客在blogger托管，就必须把这个设为true
strings	Object	官方介绍说“允许您更改默认的消息，在这里看到更多细节”
stripBrs	false	设为true可以自动去掉代码里的<br/>标签
tagName	“pre”	更改自动识别的标签，如果改成p就会识别段落里的代码

在刚才放footer的代码下面接着，像这样设置：

SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();

上面演示了启用blogger模式，自己一条条添加规则就行了

SyntaxHighlighter.defaults 单个调节

名称	默认值	介绍
auto-links	true	自动给代码里的网址加链接（默认已打开）
class-name	‘ ‘	定义CSS，详细看DEMO
collapse	false	设为true自动收缩代码块，点击才打开
first-line	1	设定第一行的的行号，如果设为10即行号从10开始
gutter	true	打开或关闭行号显示
highlight	null	例子：设定[2,3]，可以高亮2和3行。设定4，单独高亮第4行
html-script	false	这个可以让代码块里面的HTML代码不执行，前提是要特别下载一个shBrushXml.js并载入。请自行到官网找。
smart-tabs	true	谁可以告诉我这货用来作甚！
tab-size	4	更改空格的宽度
toolbar	true	开关工具栏，就是右上角那个

1.全局调整：方法同上

SyntaxHighlighter.defaults['gutter'] = false;
SyntaxHighlighter.defaults['smart-tabs'] = false;
<!-- 一条条添加 -->
SyntaxHighlighter.all();

2.单个调整：把刚才的`<pre></pre>`改改

<pre class="brush: js; ruler: true; first-line: 10; highlight: [2, 4, 6]">...</pre>