Hexo渲染代码块：Prism插件的配置

Prism是一个轻量级的、可扩展的语法高亮器。Prism is a lightweight, extensible syntax highlighter.

1. 下载Prism配置文件

前往Prismjs官方下载页面，然后：

  1. 选择一款喜欢的主题（Themes）。
  2. 选择想要高亮的语言（Languages），可以直接全选。
  3. 选择想要的插件（Plugins），常用的如行号显示（Line Numbers）、语言显示（Show Language）、颜色预览（Inline color）、复制按钮（Copy to Clipboard Button）、下载按钮（Download Button）等，可按需选取。

随后，网站就会根据我们的选择自动生成两份配置文件，分别点击页面下方的“DOWNLOAD JS”和“DOWNLOAD CSS”即可下载。

2. 更改Hexo本地配置

以Ocean主题为例。

在.themes\ocean\source\js文件夹下新建一个prism文件夹，并将刚才下载的prism.js和prism.css复制到prism文件夹中。

然后更改配置。打开.\themes\ocean\layout\_partial文件夹，找到head.ejs，在head标签内部的最后增加一行代码，增加之后形如：

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

再找到footer.ejs，类似地，增加一行代码：

<footer class="footer">
  ...
  <script src="/js/prism/prism.js" async></script>
</footer>

当然，也可以选择将下载好的文件放置在其他文件夹，则上面两处配置的href属性和src属性也要相应更改。此处，href属性和src属性的值是主题资源文件夹.themes\ocean\source的相对路径。

最后，更改主题配置文件即_config.yml（关于站点配置文件和主题配置文件的区别，参见“Hexo渲染数学公式：配置方法与原理浅释”），将内置的highlight和prismjs功能关闭：

highlight:
  enable: false
  ...
prismjs:
  enable: false
  ...

3. 行号插件配置

经过这样的配置之后，已经可以取得相当不错的代码块渲染效果。

不过，如果在下载配置文件时勾选了行号显示（Line Numbers）插件的话，还需增加一步，才能看到代码块前的行号。

打开.\themes\ocean\layout\layout.ejs，指定body标签的类为"line-numbers"，即可全局启用行号显示：

<body class="line-numbers">
  ...
</body>

本站使用的是Prism的Tomorrow Night主题。

参考文献