在vue中使用highlight

1.安裝highlight.js

npm install highlight.js

2.在main.js中引入highlight.js

import hljs from 'highlight.js';
import 'highlight.js/styles/atom-one-dark.css'	//樣式

3.在main.js中自定義指令

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

注：指令寫在new Vue之前

4.在需要高亮內容標籤使用v-highlight

<div>
    <pre v-highlight>
        <code class="lang-javascript">
            {{codeText}}
        </code>
    </pre>
</div>

---

更快捷的方法：使用vue-highlightjs