highlight.js代码高亮的使用

npm install highlight.js

在main.js中引入并且创建一个自定义指令（这里import引入样式没有效果，用require就有效果 我也不知道为什么）

// 富文本代码高亮插件
import hljs from 'highlight.js'
// 定义一个全局指令
Vue.directive('highlight',function (el) {
  let blocks = el.querySelectorAll('pre code');
  blocks.forEach((block)=>{
    hljs.highlightBlock(block)
  })
})
// import 'highlight.js/styles/default.css'
require('highlight.js/styles/color-brewer.css');

在需要用到代码高亮的地方使用

<div v-html="templateStr" v-highlight></div>