博客更换代码高亮引擎了，所以想简单写篇文章记录一下使用感受。
简单对比
Highlight.js
博客到今天之前一直使用的是 highlight.js 作为代码高亮引擎。 这个引擎总体还是不错的，相对于其它高亮引擎来说，最大的优点应该是：自动检测代码语言。 但是本人认为大家贴代码的时候都有写上语言名字的习惯，所以花这么多功夫实现一个自动语法检测貌似并没有太大意义。 并且，如果以后以更换到一款没有自动语言检测的引擎，那么将是灾难。
而我现在之所以要换其它的引擎，却是因为它有一个天生的缺陷：不支持行号。
我从没见过哪一款代码编辑器没有行号，代码查看器也是一样，唯独其作者就是有点奇怪，貌似是个偏执狂。 他认为不支持行号是它的特点（feature），说了一大堆无聊的文字来解释为什么没有行号。 有兴趣可以读一读。抱歉，我不同意。我需要行号。
我尝试过自己添加行号功能，无奈不支持编写插件，可扩展性不好，于是暂时决定弃用。
Prism.js
如果访问过MDN的话，会发现它使用的是一个名叫Prism.js的引擎，看上去着色还不错。于是去了解了一下。
这款代码高亮引擎的优势相对于前者在于：
- 支持编写插件
- 支持行号（插件）
- 支持行高亮（插件）
插件基本是作者自己写的（作者是个女程序员貌似），而且打包的时候直接打包在一起，非常方便。
所以我就准备切换到这个引擎。
Prism.js 的使用
导入引擎和样式
<script src="prism.js"></script>
<link rel="stylesheet" href="prism.css" />
如果是自动高亮，这样就够了。
在文章中插入代码
Prism.js 推荐使用 w3c 推荐的标准的在页面中嵌入代码的方式，像下面这样：
<pre>
<code class="language-xxx">
这里写代码
</code>
</pre>
多余的空格去掉，language-xxx中的xxx是语言的名字。
这样的代码，就会被 Prism.js 自动识别并高亮。
显示行号
Prism.js 的行号是作为插件提供的（虽然是打包在一起），它需要一个开关来启用它：在<pre>标签上加上一个line-numbers类。
<pre class="line-numbers">
<code class="language-xxx">
这里写代码
</code>
</pre>
这并不麻烦。因为现在几乎没有人纯手写HTML来发表文章，而是类似于Markdown，由Markdown引擎转换成HTML。 所以，在转换的时候自定义一下输出格式就好了。或者不转换，在前台用JS实现，就像我一样。
我的博客平台
但是我博客最开始是把代码直接放在<pre>下面的，这样一来就不能直接被 Prism.js 识别，所以手动调用了其API来完成代码高亮。
这里有一个经验就是：在你很熟悉一个领域之前，不要尝试做一些自认为很聪明的事，那往往是自作聪明。
我的样式也是我自己完全重写的（插件部分还没有），用的是 SCSS 写的，不是 CSS。
这篇文章的内容已被作者标记为“过时”/“需要更新”/“不具参考意义”。