【博客日志】更改代码高亮引擎 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。

发表于:2018年4月2日,阅读量:398,标签:博客日志 · 代码高亮

版权声明:若非特别注明,本站所有文章均为作者原创,转载请务必注明原文地址。