溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關vue.js中代碼高亮的方法的內容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。
vue.js中代碼高亮的方法：首先需要下載依賴，并在【main.js】文件中導入包；然后在【main.js】文件中自定義一個指令；最后在vue文件中使用相關指令即可。
vue.js中代碼高亮的方法：
1、首先需要下載依賴：
npm install highlight.js --save
2、在main.js文件中導入包：
import hljs from 'highlight.js' //導入代碼高亮文件 import 'highlight.js/styles/monokai-sublime.css' //導入代碼高亮樣式
3、同樣是在main.js文件中自定義一個指令：
//自定義一個代碼高亮指令
Vue.directive('highlight',function (el) {
let highlight = el.querySelectorAll('pre code');
highlight.forEach((block)=>{
hljs.highlightBlock(block)
})
})4、在vue文件中使用指令：
<div class="article_content" v-highlight>
<div class="head">
<h3><span class="article-type">{{article_type}}</span>{{title}}</h3>
<span>{{time}}</span><span>作者:{{author}}</span>
<span>閱讀數:{{count_read}}</span><span>分類:{{blog_type}}</span>
</div>
<hr style="margin: 15px 0;">
<div v-html="input"></div>
</div>上圖：
感謝各位的閱讀！關于vue.js中代碼高亮的方法就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
