vue使用highlight.js的坑

最近用vue.js+django做了一个单页blog，用marked.js解析markdown，但是代码没有高亮，看起来很丑。就用highlight.js高亮代码，用法很简单

<link href="http://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css" rel="stylesheet">  
<script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script>  
<script>hljs.initHighlightingOnLoad();</script>

直接三行代码就能实现，然而在单页应用中不能高亮。
查了很多资料知道是vue-router的问题，在路由改变时，页面将会重新渲染并且会移除事件，这里就把 highlight 的事件给移除了。

得到的解决方案是使用 Vue.js 的自定义指令，定义一个v-highlight 的指令来使得 pre code 中的代码高亮。

#引入必要库
<link href="http://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css" rel="stylesheet">  
<script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script>  

#在main.js定义自定义指令 
Vue.directive('highlight',function (el) {
  let blocks = el.querySelectorAll('pre code');
  blocks.forEach((block)=>{
    hljs.highlightBlock(block)
  })
})

#在要使用高亮的地方使用v-highlight指令
<div v-html="Marked" v-highlight>
</div>

到此就能实现高亮了

我的效果图