CodePlayer

对于看到这篇文章的读者而言，相信不需要我再介绍SyntaxHighlighter和Prettify(Google-Code-Prettify)是什么了。在几年前，笔者就已经接触并尝试过这两个语法高亮组件。现在使用WordPress进行网站创作，许多文章中都需要粘贴大量的源代码，为了使源代码更加简洁美观、易于理解，自然也不会忘记这两个老伙计。

最初，笔者选择了SyntaxHighlighter作为WordPress的语法高亮辅助插件，原因就是SyntaxHighlighter已经是一个相对比较成熟稳定的老牌语法高亮插件了，而且还支持复制、在新窗口查看源代码等较多的可选功能。当然，SyntaxHighlighter也有许多不尽如人意的地方，例如：SyntaxHighlighter在某些浏览器上可能会出现复制的源代码不会自动换行，在某些浏览器上按钮浮动层的位置会出现偏差，代码缩进可能失效，最新版本的SyntaxHighlighter 3.0.83在某些浏览器上双击复制源代码时，外观出现走样……这些问题至今也没有解决。好在这些我都能够忍受，实在不行，自己稍微进行一些简单的封装，就可以修正。但有一点无法忍受的是，SyntaxHighlighter在对HTML代码进行语法高亮的时候，无法对其中内嵌的JavaScript代码进行语法高亮——而这种场景的代码在我的文章中是将会大量存在的。

接着，我使用Google-Code-Prettify作为WordPress的语法高亮插件。与SyntaxHighlighter相比，Prettify不需要指定源代码的语言类型，就能够自动分析出当前语言的类型并进行对应的语法高亮修饰。值得注意的是，虽然Prettify也可以显示行号，但默认的是每5行显示一个行号。

如果需要让Prettify每一行显示一个行号，我们需要去掉样式文件pretty.css中的样式：

li.L0, li.L1, li.L2, li.L3, li.L5, li.L6, li.L7, li.L8 {
	list-style-type: none;
}

此外，将属性值none改为decimal也可以起到同样的效果。

li.L0, li.L1, li.L2, li.L3, li.L5, li.L6, li.L7, li.L8 {
	list-style-type: decimal;
}

这时我们就可以看到完整的效果了。

经过测试，在FireFox、Chrome浏览器上复制源代码，不会复制到行号，并且缩进、换行都正确无误，只是在IE浏览器上复制源代码的时候，会复制到行号，而且无法自动换行。

备注：
在Chrome浏览器上，选中的时候会选中前面的行号，但是实际复制的内容中并不包含行号。
在IE浏览器上，选中的时候不会选中前面的行号，但是实际复制的内容中却包含行号。

不管是使用SyntaxHighlighter，还是使用Google-Code-Prettify，源代码中的"<"和">"都应该替换成"&lt;"和"&gt;"，否则可能无法正确进行语法高亮修饰。