【vue】 vue引入highlight.js高亮顯示代碼


【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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM