当前位置: 首页 > 技术随笔 > 分别使用语法高亮插件SyntaxHighlighter和Prettify后的抉择

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

对于看到这篇文章的读者而言,相信不需要我再介绍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;",否则可能无法正确进行语法高亮修饰。

3 0
我们认为: 用户的主要目的,是为了获取有用的信息,而不是来点击广告的。因此本站将竭力做好内容,并将广告和内容进行分离,确保所有广告不会影响到用户的正常阅读体验。用户仅凭个人意愿和兴趣爱好点击广告。
我们坚信:只有给用户带来价值,用户才会给我们以回报。
CodePlayer技术交流群1CodePlayer技术交流群1

帮朋友打一个硬广告:

P2P网贷系统(Java版本) 新年低价大促销,多年P2P技术积累,系统功能完善(可按需定制,可支持第三方存管、银行存管),架构稳定灵活、性能优异、二次开发快速简单。 另可提供二次开发、安装部署、售后维护、安全培训等一条龙服务。

外行看热闹,内行看门道。可以自信地认为,在系统设计上,比市面上的晓风、迪蒙、方维、绿麻雀、国融信、金和盛等P2P系统要好。
深圳地区支持自带技术人员现场考察源代码、了解主要技术架构,货比三家,再决定是否购买。

也可推荐他人购买,一旦完全成交,推荐人可获得实际售价 10% 的返现。
有意向者,详情请 点击这里 联系,工作时间立即回复。

语法高亮
SyntaxHighlighter
Prettify