原文链接 http://www.kkblog.me/notes/%E5%9C%A8Vue%E4%B8%AD%E4%BD%BF%E7%94%A8Highlight.js%E9%81%87%E5%88%B0%E7%9A%84%E5%9D%91
注：以下为加速网络访问所做的原文缓存，经过重新格式化，可能存在格式方面的问题，或偶有遗漏信息，请以原文为准。
在实现 flask-restaction 的自动生成API文档功能时，用到 https://highlightjs.org/ 实现代码高亮。
首先按照文档用的是这个方法：
<script>hljs.initHighlightingOnLoad();</script>
结果是只要切换了路由，代码就没有语法高亮了，因为hljs只在页面加载时进行语法着色。
Google之后找到另一个方法 Vue 中使用 highlight.js 通过自定义Vue指令实现：
Vue.directive('highlightjs', function() {
let blocks = this.el.querySelectorAll('pre code');
Array.prototype.forEach.call(blocks, Hljs.highlightBlock);
})
过了几天，发现有个Bug，切换路由后，有些代码高亮的部分内容不会随着数据改变。 最后发现是highlightjs会改变DOM结构，导致Vue无法呈现数据。
解决方法如下，也是自定义Vue指令:
directives: {
highlight: function(el, binding) {
if (binding.value) {
let value = null
if (typeof(binding.value) === "string") {
value = binding.value
} else {
value = JSON.stringify(binding.value, null, 4)
}
el.innerHTML = hljs.highlight("json", value, true).value
}
}
}
HTML中用法如下:
<pre v-highlight="value">Show This If No Value</pre>