版權聲明：本文首發 http://asing1elife.com ，轉載請注明出處。 https://blog.csdn.net/asing1elife/article/details/82796652

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>