Keep on going, never give up.

插件精选:十款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格式高亮,需要把<转换成&lt;

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

<link type="text/css" rel="stylesheet" href="css/SyntaxHighlighter.css"></link>
<script language="javascript" src="js/shCore.js"></script>
<script language="javascript" src="js/shBrushCSharp.js"></script>
<script language="javascript" src="js/shBrushXml.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.ClipboardSwf = '/flash/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>

最后更新:2007.08(SyntaxHighlighter_1.5.1,支持Wordpress的google-syntax- highlighter.1.5.1请到WordPress官方下载)

示例样式:

5、WP-ChiliChili

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 "&lt;script&gt;alert( 'Hello ' + $name );&lt;/script&gt;";</code>
<code class="javascript">alert( 'Hello ' + $name );</code>

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

<script type="text/javascript" src="SOMEWHERE_ELSE/jquery.js"></script>
<script type="text/javaScript" src="SOMEWHERE/jquery.chili-2.2.js"></script>
<script type="text/javascript">
ChiliBook.recipeFolder = "SOMEWHERE/";
</script>

最后更新: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的特性区别及选择建议

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

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

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

相关评论(0):  

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

订阅博客

最新文章

本站采用创作共用版权协议, 要求署名、非商业用途和保持一致. 转载也必须遵循“署名-非商业用途-保持一致”的创作共用协议. 返回顶部
Copyright@2005-2016 Metsky.com, All rights Reserved.