[博客日志] 更改代码高亮引擎 highlight.js 为 Prism.js

博客更换代码高亮引擎了，所以想简单写篇文章记录一下使用感受。

简单对比

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。