最近忙著開(kāi)發(fā)自己的開(kāi)發(fā)腳手架，在做代碼生成器的時(shí)候,有個(gè)預(yù)覽功能，需要讓代碼高亮，于是在網(wǎng)上搜了一下，就看到了highlight.js,試了一下，感覺(jué)還是不錯(cuò)，這里記錄一下,方便給需要的同學(xué)參考。

如果想了解更多請(qǐng)參考 highlight.js官方文檔

第一步：安裝依賴(lài):

npm install highlight.js --save 或 yarn add highlight.js

第二步：在main.js中引入，官方為我們提供了vue到插件

import hljs from 'highlight.js'
import 'highlight.js/styles/idea.css'  //這里有多個(gè)樣式，自己可以根據(jù)需要切換
Vue.use(hljs.vuePlugin);

第三：在組件中使用

  <div id="app">
    <!-- 可以使用自動(dòng)檢測(cè) -->
    <highlightjs autodetect :code="function test(){}" />
    <!-- 也可以指定語(yǔ)言 -->
    <highlightjs language='javascript' code="var x = 5;" />
  </div>

ok,如果使用官方自帶的插件就到這里可以了。

image.png

第四步: highlightjs 擴(kuò)展(自定義插件)
可以參考:https://www.cnblogs.com/Jimc/p/13161836.html

總結(jié):
具體內(nèi)容就介紹到這里，因?yàn)楸容^簡(jiǎn)單，就不用過(guò)多廢話，直接按套路走就ok了。有什么問(wèn)題歡迎留言，喜歡我的文章記得關(guān)注就好??!