vue自定义指令实现Highlight.js高亮代码

在Vue项目中直接引入highlight.js会遇到一些问题，官方论坛上的一篇帖子给出了出现这种现象的原因，即vue-router在改变路由的时候会清除渲染,并移除事件
参考了答案后，得出了用vue的自定义指令(directive)解决问题的方法：

import hljs from 'highlight.js'
//还需要引入hljs的主题css，此处略过
Vue.directive('highlight', function () {
    let blocks = this.el.querySelectorAll('pre code')
    Array.prototype.forEach.call(blocks, hljs.highlightBlock)
})

补充：Vue 2中，自定义指令的API发生了一些变化，需要用这样的写法：

Vue.directive('highlight', {
    bind: function (el) {
        let blocks = this.el.querySelectorAll('pre code')
        Array.prototype.forEach.call(blocks, hljs.highlightBlock)
    }
})

设置好自定义指令后，在标签里使用指令

<div v-highlight>
  <pre>
    <code class='可以在这里手动指定语言'>
    </code>
  </pre>
</div>

补充2: 利用上面的原理，我写了一个简单的插件vue-hljs，安装完并引入依赖以后，简单的Vue.use(vueHljs)就可以使用v-highlight去高亮代码了。