Vue集成highlight.js

highlight.js是一个比较实用的语法高亮插件，但其默认并不能在Vue中直接使用

更多精彩

• 更多技术博客，请移步 asing1elife’s blog

在项目的package.json文件中安装highlight.js

{
	...
	"dependencies": {
		...
		"highlight.js": "^9.12.0"
	},
	...
}

编写集成文件，稍后会作为自定义插件引入Vue

import Hljs from 'highlight.js'

import 'highlight.js/styles/googlecode.css'

let Highlight = {}

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

export default Highlight

在main.js中引入上述文件

...
import Highlight from './assets/plugins/highlight/highlight.js'

Vue.use(Highlight)
...

在需要使用到语法高亮的标签上使用v-highlight并传入待显示内容

• 由于定义的监听规则是带 pre code 的内容，所以可能需要手动为待显示内容进行一次标签包裹

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