您好,登錄后才能下訂單哦!
這篇文章主要介紹“highlight.js代碼高亮插件怎么使用”,在日常操作中,相信很多人在highlight.js代碼高亮插件怎么使用問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”highlight.js代碼高亮插件怎么使用”的疑惑有所幫助!接下來,請跟著小編一起來學(xué)習(xí)吧!
在網(wǎng)頁使用過程中,經(jīng)常會用到代碼的展示。而不同顏色的代碼,可以讓代碼看起來更直觀,也更美觀。
找了幾個不同的插件,覺得highlight的插件比較實用,而且用起來炒雞簡單。
比如這樣:
首先,我們先下載一個highlight的js文件。
https://highlightjs.org/
點擊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代碼高亮插件怎么使用”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識,請繼續(xù)關(guān)注億速云網(wǎng)站,小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。