亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

highlight.js 代碼高亮插件的使用詳解

 更新時(shí)間：2022年01月06日 15:11:10   作者：肖恩不是小羊  
在網(wǎng)頁(yè)使用過(guò)程中，經(jīng)常會(huì)用到代碼的展示。代碼高亮可以直觀的了解代碼，本文主要介紹了highlight.js 代碼高亮插件的使用詳解，具有一定的參考價(jià)值，感興趣的可以了解一下

在網(wǎng)頁(yè)使用過(guò)程中，經(jīng)常會(huì)用到代碼的展示。而不同顏色的代碼，可以讓代碼看起來(lái)更直觀，也更美觀。

找了幾個(gè)不同的插件，覺(jué)得highlight的插件比較實(shí)用，而且用起來(lái)炒雞簡(jiǎn)單。

比如這樣：

首先，我們先下載一個(gè)highlight的js文件。

https://highlightjs.org/

點(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)簽里?。。?/p>

比如這樣：

原則上系統(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)簽的"<"換成"&lt"，把">"換成"&gt"喔~

到此這篇關(guān)于highlight.js 代碼高亮插件的使用詳解的文章就介紹到這了,更多相關(guān)highlight.js 代碼高亮插件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論