在Vue中使用highlight.js高亮顯示程式碼

安裝

npm install highlight.js

編碼

// 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)
  })
})

使用

p v-html="html" v-highlight></p>

ps：特別注意v-html=html中的html內容必須包含：<pre><code>'+html+'</code></pre>  pre和code標籤