highlight.js 代碼高亮插件的使用詳解
在網(wǎng)頁(yè)使用過(guò)程中，經(jīng)常會(huì)用到代碼的展示。而不同顏色的代碼，可以讓代碼看起來(lái)更直觀，也更美觀。
找了幾個(gè)不同的插件，覺(jué)得highlight的插件比較實(shí)用，而且用起來(lái)炒雞簡(jiǎn)單。
比如這樣：
首先，我們先下載一個(gè)highlight的js文件。
點(diǎn)擊get version按鈕進(jìn)入語(yǔ)言選擇
勾選你常用的語(yǔ)言，在使用插件時(shí)會(huì)自動(dòng)檢測(cè)你要展示的代碼的語(yǔ)言，并自動(dòng)讓代碼高亮。通常common就足夠用了。
然后點(diǎn)擊下面的download按鈕，下載，解壓，里面會(huì)有js文件和css文件。
js文件決定你的代碼哪些部分會(huì)變高亮，css文件決定你的代碼會(huì)變成什么顏色~
在解壓后的文件里找到一個(gè)highlight.pack.js文件，在使用時(shí)導(dǎo)入這個(gè)js文件。
<script src="js/jquery-3.1.1.js"></script> <script src="js/highlight.pack.js"></script>
打開(kāi)里面的styles文件，里面有很多的css文件。這些文件可以更改你的展示代碼的css樣式，包括高亮的顏色和背景色(主題色)。
在使用時(shí)想使用那種樣式只需要導(dǎo)入這個(gè)樣式的css文件即可?？床欢@些英文都代表的什么樣式？這個(gè)網(wǎng)址有各個(gè)css文件的效果展示：https://highlightjs.org/static/demo/
這里我選擇了一個(gè)dark.css文件：
<link rel="stylesheet" type="text/css" href="css/dark.css" rel="external nofollow" />
導(dǎo)入js文件和css文件后然后就可以使用了。
在使用時(shí)，一定要將你要展示的代碼包在<pre><code></code></pre>標(biāo)簽里?。?！
比如這樣：
原則上系統(tǒng)會(huì)自動(dòng)檢測(cè)你的代碼的內(nèi)容，不過(guò)如果你不放心的話，可以在<code>標(biāo)簽中用代碼用到的語(yǔ)言起一個(gè)class名
比如這樣：
好啦，讓我們看一下效果：
這個(gè)只是dark.css這個(gè)樣式的顏色，想要?jiǎng)e的顏色自己改~
如果你的代碼里包含標(biāo)簽，記得將標(biāo)簽的"<"換成"<"，把">"換成">"喔~
到此這篇關(guān)于highlight.js 代碼高亮插件的使用詳解的文章就介紹到這了,更多相關(guān)highlight.js 代碼高亮插件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vuex是基于vuex.js的狀態(tài)管理工具,可以把它理解為一個(gè)倉(cāng)庫(kù),下面這篇文章主要給大家介紹了關(guān)于uniapp中如何使用vuex并持久化的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
引入 TypeScript 到 Electron 項(xiàng)目可以幫助你捕捉錯(cuò)誤并在編寫(xiě)代碼時(shí)提供更好的自動(dòng)完成和文檔，這篇文章主要介紹了electron使用typescript的步驟,需要的朋友可以參考下2024-04-04
跟我學(xué)習(xí)javascript的for循環(huán)和for...in循環(huán)
跟我學(xué)習(xí)javascript的for循環(huán)和for...in循環(huán)，它們是JavaScript中提供了兩種方式迭代對(duì)象，本文就和大家一起學(xué)習(xí)for循環(huán)和for...in循環(huán)，感興趣的小伙伴們可以參考一下2015-11-11
微信小程序云開(kāi)發(fā)實(shí)現(xiàn)云數(shù)據(jù)庫(kù)讀寫(xiě)權(quán)限
這篇文章主要為大家詳細(xì)介紹了微信小程序云開(kāi)發(fā)實(shí)現(xiàn)云數(shù)據(jù)庫(kù)讀寫(xiě)權(quán)限，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05
Bootstrap中datetimepicker使用小結(jié)
這篇文章主要為大家詳細(xì)介紹了Bootstrap中datetimepicker的使用方法，一款功能強(qiáng)大的日期選擇控件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要為大家詳細(xì)介紹了在前端開(kāi)發(fā)中,常見(jiàn)的跨域解決方案,文中的示例代碼講解詳細(xì),具有一定的參考價(jià)值,有需要的小伙伴可以了解下2023-09-09
這篇文章主要介紹了微信小程序3D輪播實(shí)現(xiàn)代碼,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
微信小程序js文件改變參數(shù)并在視圖上及時(shí)更新【推薦】
這篇文章主要介紹了微信小程序js文件改變參數(shù)并在視圖上及時(shí)更新的實(shí)現(xiàn)代碼，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-06-06
JavaScript實(shí)現(xiàn)將阿拉伯?dāng)?shù)字轉(zhuǎn)換成中文或大寫(xiě)中文的方法
現(xiàn)在有需求將億元之內(nèi)的阿拉伯?dāng)?shù)字轉(zhuǎn)換成中文,例如：1234轉(zhuǎn)換后變?yōu)橐磺Ф偃脑俎D(zhuǎn)換成壹仟貳佰叁拾肆,所以本文給大家介紹了用JavaScript實(shí)現(xiàn)將阿拉伯?dāng)?shù)字轉(zhuǎn)換成中文大寫(xiě),感興趣的小伙伴跟著小編一起來(lái)看看吧2024-11-11
一文詳解TypeScript中的內(nèi)置數(shù)據(jù)類型
作為一門類型安全的編程語(yǔ)言，TypeScript?提供了多種內(nèi)置數(shù)據(jù)類型，幫助我們更好地定義和操作數(shù)據(jù)，下面小編就來(lái)和大家詳細(xì)聊聊這些數(shù)據(jù)類型的相關(guān)知識(shí)吧2023-06-06