对代码语法高亮插件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元素还有其它的用处、可能有些不是用来显示代码的，那么，上面的修改可能不适合你，你需要进一步修改一下。

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