highlight.js 代碼高亮插件的使用詳解
在網頁使用過程中,經常會用到代碼的展示。而不同顏色的代碼,可以讓代碼看起來更直觀,也更美觀。
找瞭幾個不同的插件,覺得highlight的插件比較實用,而且用起來炒雞簡單。
比如這樣:
首先,我們先下載一個highlight的js文件。
https://highlightjs.org/
點擊get version按鈕進入語言選擇
勾選你常用的語言,在使用插件時會自動檢測你要展示的代碼的語言,並自動讓代碼高亮。通常common就足夠用瞭。
然後點擊下面的download按鈕,下載,解壓,裡面會有js文件和css文件。
js文件決定你的代碼哪些部分會變高亮,css文件決定你的代碼會變成什麼顏色~
在解壓後的文件裡找到一個highlight.pack.js文件,在使用時導入這個js文件。
<script src="js/jquery-3.1.1.js"></script> <script src="js/highlight.pack.js"></script>
打開裡面的styles文件,裡面有很多的css文件。這些文件可以更改你的展示代碼的css樣式,包括高亮的顏色和背景色(主題色)。
在使用時想使用那種樣式隻需要導入這個樣式的css文件即可。看不懂這些英文都代表的什麼樣式?這個網址有各個css文件的效果展示:https://highlightjs.org/static/demo/
這裡我選擇瞭一個dark.css文件:
<link rel="stylesheet" type="text/css" href="css/dark.css" rel="external nofollow" />
導入js文件和css文件後然後就可以使用瞭。
在使用時,一定要將你要展示的代碼包在<pre><code></code></pre>標簽裡!!!
比如這樣:
原則上系統會自動檢測你的代碼的內容,不過如果你不放心的話,可以在<code>標簽中用代碼用到的語言起一個class名
比如這樣:
好啦,讓我們看一下效果:
這個隻是dark.css這個樣式的顏色,想要別的顏色自己改~
如果你的代碼裡包含標簽,記得將標簽的"<"換成"<",把">"換成">"喔~
到此這篇關於highlight.js 代碼高亮插件的使用詳解的文章就介紹到這瞭,更多相關highlight.js 代碼高亮插件內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- 代碼塊高亮可復制顯示js插件highlight.js+clipboard.js整合
- Vue單頁面應用中實現Markdown渲染
- 在ASP.Net Core應用程序中使用Bootstrap4
- 基於python詳解PyScript到底是什麼
- SpringBoot靜態資源CSS等修改後再運行無效的解決