问题

在vue中使用代码高亮插件highlight.js的时候，始终无法生效代码高亮。这里我选择了 Highlight.js 作为语法高亮插件。

因为做的是单页应用，前端框架使用的是 Vue，用 Webpack 作为脚手架，所以很自然地 npm i -S highlight.js 安装，之后把 hljs.initHighlightingOnLoad(); 添加到代码里…

欸？为什么明明 hljs 已经注册为全局变量了，但是高亮不工作？是不是我的姿势不对？

解决

搜索了很多文章，之后发现是 Vue-Router 的锅，在 $route 改变进行跳转时，vue 会重新渲染页面，并移除页面上所有事件。所以在渲染页面后，监听已经被移除了，也就不会再进行语法高亮了。

Vue 自定义指令：

使用 Vue 的自定义指令，可以在内容渲染时才搜索对应内容中的 <pre><code> 标签，控制更方便。

import hljs from 'highlight.js';
Vue.directive('hljs', el => {
  let blocks = el.querySelectorAll('pre code');
  Array.prototype.forEach.call(blocks, hljs.highlightBlock);
});

使用方法也很简单，在需要进行代码高亮的地方，加上 v-hljs 即可：

<div class="post-content" v-html="postData.content" v-hljs></div>;

Highlight.js 的使用说明比较简陋，不仔细看根本不知道样式文件在 highlight.js/src/styles 文件夹中，并需要自己手动引入。

<!--引入样式文件才有高亮效果-->
<link rel="stylesheet" href="./highlight/styles/default.css">