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

陪她去流浪 桃子 2018年04月02日 编辑 阅读次数：6928

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

简单对比

Highlight.js

博客到今天之前一直使用的是 highlight.js 作为代码高亮引擎。 这个引擎总体还是不错的，相对于其它高亮引擎来说，最大的优点应该是：自动检测代码语言。 但是本人认为大家贴代码的时候都有写上语言名字的习惯，所以花这么多功夫实现一个自动语法检测貌似并没有太大意义。 并且，如果以后以更换到一款没有自动语言检测的引擎，那么将是灾难。

而我现在之所以要换其它的引擎，却是因为它有一个天生的缺陷：不支持行号。

我从没见过哪一款代码编辑器没有行号，代码查看器也是一样，唯独其作者就是有点奇怪，貌似是个偏执狂。 他认为不支持行号是它的特点（feature），说了一大堆无聊的文字来解释为什么没有行号。 有兴趣可以读一读。抱歉，我不同意。我需要行号。

我尝试过自己添加行号功能，无奈不支持编写插件，可扩展性不好，于是暂时决定弃用。

Prism.js

如果访问过MDN的话，会发现它使用的是一个名叫Prism.js的引擎，看上去着色还不错。于是去了解了一下。

这款代码高亮引擎的优势相对于前者在于：

  • 代码量小很多
  • 样式和语言的定制很方便
  • 支持编写插件
  • 支持行号（插件）
  • 支持行高亮（插件）

插件基本是作者本人写的（作者是个女程序员貌似），而且打包的时候直接打包在一起，非常方便。 官方已经有很丰富的插件列表，基本不需要自己写了。

支持的语言和样式列表包含在生成的下载文件的第一行以链接的形如标注，直接打开就可以重新定制，非常友好。

所以我就准备切换到这个引擎。

Prism.js 的使用

导入引擎和样式

1
2

<script src="prism.js"></script>
<link rel="stylesheet" href="prism.css" />

如果是自动高亮，这样就够了。

在文章中插入代码

Prism.js 推荐使用 w3c 推荐的标准的在页面中嵌入代码的方式，像下面这样：

1
2
3
4
5

<pre>
  <code class="language-xxx">
这里写代码
  </code>
</pre>

多余的空格去掉，language-xxx中的xxx是语言的名字。

这样的代码，就会被 Prism.js 自动识别并高亮。

显示行号

Prism.js 的行号是作为插件提供的（虽然是打包在一起），它需要一个开关来启用它：在<pre>标签上加上一个line-numbers类。

1
2
3
4
5

<pre class="line-numbers">
  <code class="language-xxx">
这里写代码
  </code>
</pre>

这并不麻烦。因为现在几乎没有人纯手写HTML来发表文章，而是类似于Markdown，由Markdown引擎转换成HTML。 所以，在转换的时候自定义一下输出格式就好了。或者不转换，在前台用JS实现，就像我一样。

更新：也可以直接在 <body> 元素上加一个 line-numbers 类（参考1、参考2），然后所有的 <pre> 就不用加了。

我的博客平台

但是我博客最开始是把代码直接放在<pre>下面的，这样一来就不能直接被 Prism.js 识别，所以手动调用了其API来完成代码高亮。徒增了麻烦。

另外，我还以为别人放在 <pre><code> 下是很麻烦的做法，我还尝试过放在 <div> 中。 但是很快被打脸了：因为 <div> 默认是会压缩空白字符的，于是在 RSS 阅读器下（不支持自定义样式）代码全部乱套，宛如智障（我）。

这里有一个经验就是：在你很熟悉一个领域之前，不要尝试做一些自认为很聪明的事，那往往是自作聪明。

我的样式也是我自己完全重写的（插件部分还没有）。 用的是官方的改版，语言换成了 SCSS。———等等！希望这不是自作聪明。

2024-05-09 更新 我把前端渲染代码改在了后端，原因可以看这里。

标签：博客日志 · 代码高亮

相关文章