vue使用highlight.js的坑

96
海上牧云l
2017.03.23 21:26* 字数 179

最近用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>

到此就能实现高亮了

我的效果图

日记本
Web note ad 1