最近用vue.js+django做了一個(gè)單頁(yè)blog，用marked.js解析markdown，但是代碼沒(méi)有高亮，看起來(lái)很丑。就用highlight.js高亮代碼，用法很簡(jiǎn)單

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

直接三行代碼就能實(shí)現(xiàn)，然而在單頁(yè)應(yīng)用中不能高亮。
查了很多資料知道是vue-router的問(wèn)題，在路由改變時(shí)，頁(yè)面將會(huì)重新渲染并且會(huì)移除事件，這里就把 highlight 的事件給移除了。

得到的解決方案是使用 Vue.js 的自定義指令，定義一個(gè)v-highlight 的指令來(lái)使得 pre code 中的代碼高亮。

#引入必要庫(kù)
<link  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>

到此就能實(shí)現(xiàn)高亮了

我的效果圖