您的浏览器过于古老 & 陈旧。为了更好的访问体验, 请 升级你的浏览器
Ready 发布于2013年02月19日 05:17

原创 分别使用语法高亮插件SyntaxHighlighter和Prettify后的抉择

29 次浏览 读完需要≈ 6 分钟

内容目录

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

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

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

prettify-demo-line-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;
}

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

google-code-prettify-demo

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

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

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

  • CodePlayer技术交流群1
  • CodePlayer技术交流群2

0 条评论

撰写评论