vue.js中代碼高亮的方法-創(chuàng)新互聯(lián)

這篇文章給大家分享的是有關(guān)vue.js中代碼高亮的方法的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧。

站在用戶的角度思考問題，與客戶深入溝通，找到馬鞍山網(wǎng)站設(shè)計(jì)與馬鞍山網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、空間域名、雅安服務(wù)器托管、企業(yè)郵箱。業(yè)務(wù)覆蓋馬鞍山地區(qū)。

vue.js中代碼高亮的方法：首先需要下載依賴，并在【main.js】文件中導(dǎo)入包；然后在【main.js】文件中自定義一個(gè)指令；最后在vue文件中使用相關(guān)指令即可。

vue.js中代碼高亮的方法：

1、首先需要下載依賴：

npm install highlight.js --save

2、在main.js文件中導(dǎo)入包：

import hljs from 'highlight.js' //導(dǎo)入代碼高亮文件
import 'highlight.js/styles/monokai-sublime.css'  //導(dǎo)入代碼高亮樣式

3、同樣是在main.js文件中自定義一個(gè)指令：

//自定義一個(gè)代碼高亮指令
Vue.directive('highlight',function (el) {
  let highlight = el.querySelectorAll('pre code');
  highlight.forEach((block)=>{
      hljs.highlightBlock(block)
  })
})

4、在vue文件中使用指令：

    

       
{{article_type}}{{title}}
       {{time}}作者:{{author}}
       閱讀數(shù):{{count_read}}分類:{{blog_type}}
    
    

    

上圖：

感謝各位的閱讀！關(guān)于vue.js中代碼高亮的方法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

網(wǎng)頁(yè)標(biāo)題：vue.js中代碼高亮的方法-創(chuàng)新互聯(lián)
文章轉(zhuǎn)載：http://m.jiaotiyi.com/article/dphijd.html