插件精选：十款WordPress高亮插件比较及示例样式

最新想把博客上某些文章中的代码进行高亮处理，更方便阅读，所以就想到代码高亮插件，所谓代码语法高亮，意思就是对网页代码片段进行格式化高亮显示（类似IDE环境中的显示效果），目前高亮插件有很多种，天缘汇总一下有15种之多，不过这些插件都是大同小异，功能强大一点的一般都带有工具栏（比如一些WordPresss上高亮插件），带有打印、复制、预览等功能，在代码的格式化显示方面，也有简单的只是采用背景和边框区分，也有复杂的高亮语法及行号支持等等，实际上后台JS代码几乎没有多大差别，实际使用还是看个人爱好。

下面看一下这些常用的代码高亮插件情况，先说明一下，由于插件太多，天缘也没有对全部插件进行测试，只是测试了其中的4-5款，而且几乎所有的插件都是面向WordPress推出的，所以后台语言大都是JS结合PHP，要么就是纯JS的，可以通过下载压缩包查看，如果大家有更好的补充，欢迎随时留言添加。

插件大小及版本集体照：

1、Syntax Highlighter

支持Plain Text方式查看代码，支持复制和打印。使用<pre>标签和<script>标签，使用方法：

A、包含shCore.js和shBrushYourBrush.js文件

B、包含shCore.css和shThemeDefault.css两个风格文件

C、使用<pre />或<script />创建代码区

D、调用SyntaxHighlighter.all()JS方法即可

最后更新：2009.10（SyntaxHighlighter 2.1.364）

示例样式：

2、SyntaxHighlighter Evolved

SyntaxHighlighter Evolved是在Syntax Highlighter JS包基础上做了修改而来，在WordPress上使用，如果要移植到其他平台还是要做些修改才行，该高亮插件的特色是鼠标移动到代码区时，会把常用的几个功能（显示代码、复制、打印）以工具栏方式显示，而且支持代码换行显示，从下面抓图看，效果还是不错。在WordPress上还有支持可视化配置，比如是否显示行号、是否显示工具栏、URL链接处理等。

使用标签为语言封堵标签，比如[php]php code here[/php]，CSS语言[css]CSS code here[/css]。更多语言支持请参考官方说明。

最后更新：2010.01，此外还有个Syntax Highlighter Plus，作者似乎是同一个人，Syntax Highlighter Plus使用标签：[sourcecode language='css']code here[/sourcecode]，其中language='css'换成自己需要显示的语言。

示例样式：

3、Syntax Highlighter and Code Colorizer

Syntax Highlighter and Code Colorizer也是基于Syntax Highlighter库开发的，代码需要转义。

最后更新：2010.01

示例样式：

4、Google Syntax Highlighter

这款插件在WordPress上用的比较多，不过还是可视编辑和HTML格式切换时导致<pre>标签的name属性丢失问题，需要手动修改WP代码为<pre>标签增加name属性可以解决，使用方法概要：

A、使用<pre></pre>标签环绕代码段，同时支持<textarea>代码段，不过使用 textarea可能会导致某些JS代码无法执行，官方推荐使用<pre>标签。支持扩展风格配置。

B、html格式高亮，需要把<转换成<

C、代码或文章结束补充放置JS高亮调用及初始化：

最后更新：2007.08（SyntaxHighlighter_1.5.1，支持Wordpress的google-syntax- highlighter.1.5.1请到WordPress官方下载）

示例样式：

5、WP-Chili，Chili

WP-Chili/Chili相对简单一些，使用的是标准的code标签，代码区需手动字符转义。天缘之所以把它们分开，似乎Chili更新跟WP-Chili更新不同步，建议还是访问官方网址好一些。Chili支持jquery定制，比如显示行号、起始行号等等（具体查看官方说明）

使用概要：

A、只需要直接写代码<code class="lang">your code here</code>，其中lang替换成自己的需要的高亮语言，支持css/php/script/html/mysql等语言显示，还有几种未列出，具体参考官方说明。示例：

<code class="php">echo "<script>alert( 'Hello ' + $name );</script>";</code>
<code class="javascript">alert( 'Hello ' + $name );</code>

B、然后在页面中，调用Chili的JS脚本即可。

最后更新：2008.07（最新版本请到chili网站下载，WP-Chili 2.2，WP官方还是老的版本）

示例效果：

6、Code Colorer

Code Colorer基于Geshi库开发的，支持RSS高亮、代码高亮、评论代码高亮等，支持显示行号、链接处理、可定制CSS颜色等特点，一看这个插件功能就比较强大。该插件使用<code>标准标签，也使用自家的<cc>非标准标签。在WordPress还支持后台参数定制，包括：滚动行数、宽度、高度、主题等等。

官方主页：http://kpumuk.info/projects/wordpress-plugins/codecolorer/

使用概要：

代码格式，[cc lang="lang"]code here[/cc]或<code lang="lang">code here</cc>，这个太复杂也不合天缘的使用习惯，就不测试了。

最后更新：2010.03

示例样式（图片来源于WORDPRESS）：

7、WP-SynHighlight

WP-SynHighlight是一款WordPress插件，轻松实现源码语法高亮，使用起来比较像个BBCode标签，兼容性也比较好，在可视化模式下编辑粘帖代码，无需手动转义。WP-SynHighlight使用标签是[codesyntax]，在WordPress下使用时，可以由可视编辑模式自动完成，更多请参考官方主页。

最后更新：2010.05

示例样式：

8、Highlight Source Pro

Highlight Source Pro是基于Geshi库，使用<pre>标签，功能还是比较强大。很上面的Syntac Highlighter 正好相反，它是一款服务器端的代码高亮插件，没有Javascript。

最近更新：2008.04，示例样式：

9、WP-CODEBOX

WP-CODEBOX也是使用<pre>标签，支持多语言显示、代码文件下载、复制到剪贴板、代码框收放及后台默认属性设置。

使用概要：<pre lang="LANGUAGE" line="N" file="download.txt" colla="+"> your code here </pre>，其中LANGUAGE如php,java,css等，由Geshi支持决定。

最近更新：2010.04

10、WP-Syntax

WP – Syntax也是使用<pre>标签加上语言格式封堵代码区域，兼容性也很好。

最后更新：2009.06

此外还有几款高亮插件，有些已经没落，比如Dojox Syntax Highlighter等，还有的官方介绍的也不太详细就不介绍了（本来这10款就已经有点多），如果是使用WordPress，那么这些插件几乎均可一试，不过一旦选中之后，还是不要轻易变动，由于约定的标签格式大都不同，按照天缘的个人看法，最好是使用code标准标签，pre标签也还可以接受，但是那些太个性的标签，像[cc]这类的独家格式，对后期维护并不友好。

天缘写本文的目的就是稍后会选择一种，然后修改接口为自己博客系统使用，由于不是WordPress，还是比较倾向于简单一点的高亮插件。

参考资料： Travaganza Blog 帕兰映像 Google Code，本文图片来源：部分插件测试源或直接图片源于插件官方，参文中链接说明。

更多文章：

网站设计：网页宽度和高度设置参考建议

网页语言ASP.NET、PHP、JSP的特性区别及选择建议

网页图片宽度和高度自适应的方法汇总

天缘征询：关于博客日志、分类和归档目录路径的讨论

边栏改版：网站博客边栏是右侧好还是左侧好

天缘博客