最近用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>
到此就能实现高亮了
我的效果图
