流行的代码语法高亮工具有很多, 但我最喜欢 Prism http://prismjs.com/ , 原因很简单: 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 元素还有其它的用处, 可能有些不是用来显示代码的, 那么, 上面的修改可能不适合你, 你需要进一步修改一下.
欢迎提出修改意见和指正.
来源: http://www.webhek.com/post/modify-prism.html