【vue】 vue引入highlight.js高亮顯示代碼
1.安裝
npm install --save vue-highlightjs
npm install --save highlight.js
這里解釋一下為什么要安裝兩個依賴:vue-highlight.js只是實現了代碼高亮的功能,他的安裝包里是沒有css的樣式文件的,因此我們還需要安裝一個highlight.js來實現真正的樣式。
2.引入
在我們的入口文件main.js中引用依賴
import VueHighlightJS from 'vue-highlightjs'
import 'highlight.js/styles/atom-one-dark.css'
Vue.use(VueHighlightJS)
3.使用
<pre v-highlightjs=codeDate ><code class="lua"></code></pre>
1
class內的lua為對應要設置高亮的腳本語言
例: javascript <code class="javascript "></code>
如遇版本問題會提示:npm install --save highlight.js/lib/highlight highlight.js/styles/github-gist.css
對比json文件的版本和依賴版本是否一致,不一致安裝為依賴的版本
安裝后會發現兩個版本一樣了
————————————————
版權聲明:本文為CSDN博主「WANGHUAN-」的原創文章,遵循CC 4.0 BY-SA版權協議,轉載請附上原文出處鏈接及本聲明。
原文鏈接:https://blog.csdn.net/qq_39583930/article/details/90518840