hexo 代码高亮

hexo 默认的代码高亮插件为 highlight.js，highlight.js 的代码高亮个人感觉不是很好看（主要是配色方面，感觉不够“高亮”），然后偶然之间发现了一个还不错的代码高亮插件：prism.js，所以就琢磨着如何将 hexo 的 highlight.js 替换为 prism.js。

禁用 highlight.js

修改站点根目录下的 _config.yml 配置文件，具体如下：

highlight:
  enable: false
  line_number: false
  auto_detect: false
  tab_replace:

获取 prism.js

下载页面：https://prismjs.com/download.html；选择 theme 主题、language 支持的语言（不要选太多，够用就好）、plugin 插件；然后点击下载按钮就行了；下载到本地之后，将它们重命名为 prism.js、prism.css，然后将它们放置到 $HEXO/themes/next/source/js/prism/ 目录下（prism 文件夹需要自己新建），即它们的路径分别是：

/themes/next/source/js/prism/prism.js
/themes/next/source/js/prism/prism.css

配置 prism.js

1、修改 $HEXO/themes/next/layout/_partials/head.swig，在尾部添加以下代码：

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

2、修改 $HEXO/themes/next/layout/_partials/footer.swig，在尾部添加以下代码：

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

如果你选择了 Copy to Clipboard Button prism.js 插件，则还需下载 clipboard.js，因为这个插件需要使用 clipboard.js 里面的函数，如果不这样做，在 Chrome 浏览器中将无法正常显示代码块，将 clipboard.js 放到 $HEXO/themes/next/source/js/prism/ 目录下，然后在 footer.swig 文件末尾添加这两行（上面的第 2 步不要执行）：

<script src="/js/prism/clipboard.js"></script>
<script src="/js/prism/prism.js" async></script>

3、修改 $HEXO/node_modules/marked/lib/marked.js，搜索 <pre><code class=" 关键字（应该只有一处），该行的内容为：

return '<pre><code class="'

将这行语句改为：如果你下载的 prism.js 未选择 Line Numbers 插件，则去掉 line-numbers（注意后面还有个空格，也要去掉）：

return '<pre><code class="line-numbers language-'

测试 prism.js

进入站点根目录，执行 hexo c && hexo g 命令（删掉原来的缓存文件，然后重新生成静态 html 页面），然后打开浏览器查看效果。注意，改用 prism.js 后，代码块必须指定一个语言，如 ```html，如果当前代码块没有合适的 language，可以将其语言指定为 none，即 ```none（无语言）。