最近忙著開發(fā)自己的開發(fā)腳手架酗钞，在做代碼生成器的時候,有個預(yù)覽功能吗浩，需要讓代碼高亮建芙，于是在網(wǎng)上搜了一下，就看到了highlight.js,試了一下拓萌，感覺還是不錯岁钓，這里記錄一下,方便給需要的同學(xué)參考。
如果想了解更多請參考 highlight.js官方文檔
第一步：安裝依賴:
npm install highlight.js --save 或 yarn add highlight.js
第二步：在main.js中引入微王，官方為我們提供了vue到插件
import hljs from 'highlight.js'
import 'highlight.js/styles/idea.css' //這里有多個樣式屡限，自己可以根據(jù)需要切換
Vue.use(hljs.vuePlugin);
第三：在組件中使用
<div id="app">
<!-- 可以使用自動檢測 -->
<highlightjs autodetect :code="function test(){}" />
<!-- 也可以指定語言 -->
<highlightjs language='javascript' code="var x = 5;" />
</div>
ok,如果使用官方自帶的插件就到這里可以了。
image.png
第四步: highlightjs 擴(kuò)展(自定義插件)
可以參考:https://www.cnblogs.com/Jimc/p/13161836.html
總結(jié):
具體內(nèi)容就介紹到這里炕倘，因為比較簡單钧大，就不用過多廢話，直接按套路走就ok了罩旋。有什么問題歡迎留言啊央，喜歡我的文章記得關(guān)注就好??!
