vue使用highlight.js的坑

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

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

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

#引入必要库
  
  

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

#在要使用高亮的地方使用v-highlight指令

到此就能实现高亮了

我的效果图