对代码语法高亮插件Prism的一点修改

流行的代码语法高亮工具有很多,但我最喜欢Prism,原因很简单:Prism很简单。Prism不仅使用起来简单,而且体积非常小。Prism之所以体积这么小,是因为它使用了非常实用而折中的技术来实现语法高亮——正则表达式。虽然采用这种技术来说不是很严谨,但对于大多数网站来说,足以。使用正则表达式技术的好处就是简单,使得整个javascript插件脚本的体积非常小。

Prism的用法非常简单,就是在HTML页面的head中嵌入Prism的js和CSS文件地址,然后在HTML正文里的pre元素上的class属性中标注pre里的代码是什么语言,Prism js会根据这些提示来个性化高亮这些代码。

Prism标准用法

如果页面上要展示一段PHP代码,则源代码应该是这样的:

<pre class="language-php">
	....
	这里是PHP代码
	....
</pre>	

Prism支持很多种语言高亮,Prism官方主页上列出的支持的语言差不多有100种。相应的,每一种语言对于的class名就是“language-语言名”。

问题就出在这里,有时候一篇文章里会出现六、七个pre代码展示块,每个pre代码块的语种还不一样,我就需要反复的写class="language-java", class="language-js", class="language-html", class="language-css"….,可想而知,这其中的“language-”是重复的。你应该知道,程序员是最懒的,不愿意多写一个可以省略的字母。我就是这样的人,我更愿意将这些写法简化成class="java", class="js", class="html", class="css"….,可官方的Prism程序不支持这样的写法,于是我就自动动手丰衣足食了——修改它的源代码,让它支持这种写法。修改的目标效果要求是这样的:

<pre class="php">
	....
	这里是PHP代码
	....
</pre>	

修改Prism的css文件

原Prism css文件里有很多pre[class*="language-"],把这些代码全部换成pre,这个很容易实现,用编辑器里自带的全文替换功能就行了。在原Prism css文件里还有很多code[class*="language-"],因为目前用不到它,也就不动它了,让它保持原样就行了。

修改Prism的js文件

Prism插件对代码进行高亮的原理很简单,就是先搜索代码中的pre元素,然后根据pre的class属性提供的语种信息按语种关键字给pre里的代码添加样式。Prism源代码里用来搜索pre元素的代码是这样的:

var lang = /\blang(?:uage)?-(?!\*)(\w+)\b/i;

需要将它改成这样:

var lang = /\b(?:language-)?(?!\*)(\w+)\b/i;

这种修改的好处是仍然兼容了原程序的写法。

Prism插件的代码组成就是一个js文件和一个CSS文件。经过对这两个文件的修改,我就可以用简单的方法标注pre里的是什么编程语言的代码,Prism能根据这些语种提示个性化的高亮其中的代码,让这些代码显得更清晰,更适合读者阅读。

需要提醒的是,本文中提到的修改都是“硬编码”式的修改,这样修改方式的缺点是,如果原插件有更新升级,我就需要重新修改。还有一点需要提醒的是,因为WEB骇客(www.webhek.com)网站的内容中的pre元素都是用来存放表示各种语言的代码的,所以原插件中将选择性的查找pre元素更换成非选择性的查找pre元素是没有问题的。但如果你的网页中pre元素还有其它的用处、可能有些不是用来显示代码的,那么,上面的修改可能不适合你,你需要进一步修改一下。

欢迎提出修改意见和指正。

阅读余下内容
 

发表评论

电子邮件地址不会被公开。 必填项已用*标注


京ICP备12002735号