Vue進(jìn)階（幺伍叁）：Vue-highlight 實(shí)現(xiàn)代碼高亮

highlight.js 支持幾十種編程語言（點(diǎn)擊下載），既包括常見的 C、java、javaScript、ruby、python、html、css、sql等，還支持 apache、nginx 這些配置文件的語法。

除了引入Vue-highlight.js文件外，還需要引入樣式文件highlight.js。vue-highlight.js只是實(shí)現(xiàn)了代碼高亮的功能，安裝包里是沒有css樣式文件的，因此我們還需要安裝一個(gè)highlight.js來實(shí)現(xiàn)真正的樣式。

安裝

npm install --save vue-highlightjs

1

引用

在我們的入口文件main.js中引用依賴

import VueHighlightJS from 'vue-highlightjs' import 'highlight.js/styles/atom-one-dark.css' Vue.use(VueHighlightJS)

1

2

3

我們使用的是atom-one-dark.css這個(gè)樣式文件，可以根據(jù)highlight.js網(wǎng)上的面配色自定義展示效果。也可以看項(xiàng)目中安裝的highlight.js中的文件去看是否具備這個(gè)樣式表。

使用

因?yàn)橐呀?jīng)實(shí)現(xiàn)了vue的組件指令化，所以使用起來非常簡便。

const s = new Date().toString()

1

2

3

4

5

拓展閱讀

hignlight.js官網(wǎng)

highlight.js demo

vue-highlightjs github

自定義插件官方文檔

自定義指令官方文檔

javaScript Vue

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。