highlight.js 代碼高亮插件的使用詳解
在網(wǎng)頁使用過程中，經(jīng)常會用到代碼的展示。而不同顏色的代碼，可以讓代碼看起來更直觀，也更美觀。
找了幾個不同的插件，覺得highlight的插件比較實用，而且用起來炒雞簡單。
比如這樣：
首先，我們先下載一個highlight的js文件。
點擊get version按鈕進入語言選擇
勾選你常用的語言，在使用插件時會自動檢測你要展示的代碼的語言，并自動讓代碼高亮。通常common就足夠用了。
然后點擊下面的download按鈕，下載，解壓，里面會有js文件和css文件。
js文件決定你的代碼哪些部分會變高亮，css文件決定你的代碼會變成什么顏色~
在解壓后的文件里找到一個highlight.pack.js文件，在使用時導(dǎo)入這個js文件。
<script src="js/jquery-3.1.1.js"></script> <script src="js/highlight.pack.js"></script>
打開里面的styles文件，里面有很多的css文件。這些文件可以更改你的展示代碼的css樣式，包括高亮的顏色和背景色(主題色)。
在使用時想使用那種樣式只需要導(dǎo)入這個樣式的css文件即可。看不懂這些英文都代表的什么樣式？這個網(wǎng)址有各個css文件的效果展示：https://highlightjs.org/static/demo/
這里我選擇了一個dark.css文件：
<link rel="stylesheet" type="text/css" href="css/dark.css" rel="external nofollow" />
導(dǎo)入js文件和css文件后然后就可以使用了。
在使用時，一定要將你要展示的代碼包在<pre><code></code></pre>標(biāo)簽里?。?！
比如這樣：
原則上系統(tǒng)會自動檢測你的代碼的內(nèi)容，不過如果你不放心的話，可以在<code>標(biāo)簽中用代碼用到的語言起一個class名
比如這樣：
好啦，讓我們看一下效果：
這個只是dark.css這個樣式的顏色，想要別的顏色自己改~
如果你的代碼里包含標(biāo)簽，記得將標(biāo)簽的"<"換成"<"，把">"換成">"喔~
到此這篇關(guān)于highlight.js 代碼高亮插件的使用詳解的文章就介紹到這了,更多相關(guān)highlight.js 代碼高亮插件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
獲取對象所有key的方法，需要使用?Object.keys(obj)?方法,Object.keys(obj)方返回一個數(shù)組，這個數(shù)組包含obj對象中的所有key，這篇文章主要介紹了javascript如何獲取對象的key和value,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了JavaScript漢諾塔問題解決方法,涉及javascript遞歸調(diào)用操作的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-04-04
JS回調(diào)函數(shù) callback的理解與使用案例分析
這篇文章主要介紹了JS回調(diào)函數(shù) callback的理解與使用,結(jié)合具體案例形式分析了javascript回調(diào)函數(shù)的功能、原理、用法及相關(guān)操作注意事項,需要的朋友可以參考下2019-09-09
BOM系列第三篇之定時器應(yīng)用(時鐘、倒計時、秒表和鬧鐘)
這篇文章主要介紹了BOM系列第三篇之定時器應(yīng)用(時鐘、倒計時、秒表和鬧鐘) 的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-08-08
這篇文章主要介紹了預(yù)防網(wǎng)頁掛馬的方法總結(jié)的相關(guān)資料,這里詳細(xì)整理了具體方法，和如何實現(xiàn)，需要的朋友可以參考下2016-11-11
11個ES13中令人驚嘆的JavaScript新特性總結(jié)
與許多其他編程語言一樣,JavaScript?也在不斷發(fā)展,小編今天就為大家介紹ES13中添加的最新功能,并查看其用法示例以更好地理解它們,有需要的小伙伴可以了解下2023-09-09
javascript同步服務(wù)器時間和同步倒計時小技巧
本文給出如何在頁面上同步顯示服務(wù)器時間的解決方案，能夠?qū)崿F(xiàn)同步服務(wù)器時間、同步倒計時，卻不占用服務(wù)器太多資源，下面我給寫出實現(xiàn)的思路2015-09-09
這篇文章主要介紹了JS+JQuery實現(xiàn)無縫連接輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
javascirpt實現(xiàn)2個iframe之間傳值的方法
這篇文章主要介紹了javascirpt實現(xiàn)2個iframe之間傳值的方法,涉及javascript針對iframe框架下的頁面元素操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2016-06-06
這篇文章主要給大家詳細(xì)介紹了javascript中鼠標(biāo)滾輪事件，圖文并茂，十分的詳細(xì)，有需要的小伙伴可以參考下。2015-05-05