Vue中使用highlight.js

通过自定义指令的方式来实现在Vue中实现语法高亮

基本实现

• 安装

npm install highlight.js --save

• 编码

// Vue-cli生成的工程文件的src/main.js
import hljs from 'highlight.js'
import 'highlight.js/styles/googlecode.css' //样式文件

Vue.directive('highlight', function (el) {
  let blocks = el.querySelectorAll('pre code');
  blocks.forEach((block) => {
    hljs.highlightBlock(block)
  })
})

• 使用

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

封装成插件

• 编写插件

// highlight.js
import Vue from 'vue'
import Hljs from 'highlight.js'
import 'highlight.js/styles/googlecode.css'

let Highlight = {}
Highlight.install = function (Vue, options) {
  Vue.directive('highlight', function (el) {
    let blocks = el.querySelectorAll('pre code');
    blocks.forEach((block) => {
      Hljs.highlightBlock(block)
    })
  })
}

export default Highlight

• 使用插件

import Highlight from 'path/to/Highlight.js'
Vue.use(Highlight)