如果你想在網(wǎng)頁(yè)上展示一些代碼笛丙,你可能會(huì)遇到一個(gè)問題:代碼看起來很單調(diào)漾脂,沒有任何顏色或格式,這樣的代碼不僅不美觀胚鸯,也不利于閱讀和理解骨稿。
那么,有沒有什么辦法可以讓代碼變得更漂亮呢姜钳?答案是有的坦冠,而且很簡(jiǎn)單。
你只需要使用一個(gè)叫做 highlight.js 的第三方庫(kù)傲须,就可以輕松實(shí)現(xiàn)代碼著色的效果蓝牲。
highlight.js 是一個(gè)非常強(qiáng)大和流行的庫(kù),它可以自動(dòng)識(shí)別和著色超過 190 種編程語(yǔ)言泰讽。
它支持多種主題和樣式例衍,讓你可以根據(jù)自己的喜好選擇合適的配色方案。
在本文中已卸,子辰將向你介紹如何使用 highlight.js 來為你的代碼著色佛玄,以及它的基本原理和優(yōu)勢(shì)。
讓我們開始吧累澡!
如何使用 highlight.js
使用 highlight.js 的方法有兩種:一種是通過 npm 下載并安裝到你的項(xiàng)目中梦抢,另一種是通過 CDN 引入到你的網(wǎng)頁(yè)中。
這里我們以 CDN 的方式為例愧哟,如果你想使用 npm 的方式奥吩,可以參考官方文檔。
首先蕊梧,我們需要在網(wǎng)頁(yè)中引入 highlight.js 的 JS 文件和 CSS 文件霞赫。
JS 文件是核心文件,負(fù)責(zé)識(shí)別和著色代碼肥矢,CSS 文件是樣式文件端衰,負(fù)責(zé)定義代碼的顏色和格式。
我們可以從 CDN 中選擇一個(gè)合適的 JS 文件和 CSS 文件。
highlight.js 提供了多個(gè) CDN 服務(wù)商旅东,你可以根據(jù)自己的需求選擇一個(gè)灭抑,這里我們以 jsDelivr 為例。
JS 文件的鏈接如下:
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/highlight.min.js"></script>
CSS 文件的鏈接則需要根據(jù)你想要的主題來選擇腾节。
highlight.js 提供了很多主題禀倔,你可以在官網(wǎng)上預(yù)覽每個(gè)主題的效果参淫,并找到對(duì)應(yīng)的 CSS 文件名愧杯,這里我們以 github-dark 為例力九。
CSS 文件的鏈接如下:
<link rel="stylesheet" >
將上面兩個(gè)鏈接分別放到網(wǎng)頁(yè)的 head 標(biāo)簽中跌前,就完成了引入 highlight.js 的步驟。
接下來伴挚,我們需要在網(wǎng)頁(yè)中寫一些代碼茎芋,并用 pre 標(biāo)簽和 code 標(biāo)簽包裹起來蜈出。
pre 標(biāo)簽用于保留代碼的格式,code 標(biāo)簽用于標(biāo)識(shí)代碼內(nèi)容偷厦。例如:
<pre>
<code id="code-area">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
height: 100vh;
width: 100vw;
}
</code>
</pre>
注意只泼,我們給 code 標(biāo)簽添加了一個(gè) id 屬性辜妓,方便后面通過 JS 獲取它籍滴。
最后孽惰,我們需要在網(wǎng)頁(yè)中添加一些 JS 代碼,來調(diào)用 highlight.js 的方法坦报,實(shí)現(xiàn)代碼著色的功能片择。
highlight.js 提供了兩個(gè)主要的方法:highlightElement 和 highlight字管。
這兩個(gè)方法都可以實(shí)現(xiàn)代碼著色的效果信不,但是適用于不同的場(chǎng)景抽活。
highlightElement
highlightElement 方法適用于當(dāng)你的代碼是直接寫在網(wǎng)頁(yè)中的情況下硕。
這個(gè)方法接受一個(gè)元素作為參數(shù),并將該元素內(nèi)部的文本內(nèi)容進(jìn)行著色處理果港。例如:
// 獲取 code 元素
const codeEle = document.getElementById("code-area");
// 調(diào)用 highlightElement 方法辛掠,傳入 code 元素
hljs.highlightElement(codeEle);
如果一切順利萝衩,你應(yīng)該能看到類似下圖的效果:
代碼已經(jīng)被著色了猩谊,并且你可以看到代碼被替換成了一個(gè)個(gè)標(biāo)簽牌捷,標(biāo)簽被加上了樣式。
在最后的原理里我們?cè)谠敿?xì)的說一下喜滨。
highlight
highlight 方法適用于當(dāng)你的代碼是通過 Ajax 請(qǐng)求獲取到的純文本數(shù)據(jù)的情況虽风。
這個(gè)方法接受一個(gè)字符串作為參數(shù)辜膝,并返回一個(gè)對(duì)象漾肮,包含著色后的文本內(nèi)容和代碼的語(yǔ)言。例如:
<script>
const codeEle = document.getElementById('code-area')
// 比如說現(xiàn)在 code 就是 Ajax 返回的數(shù)據(jù)验游,lang 就是代碼語(yǔ)言,content 就是代碼內(nèi)容
const code = {
lang: 'css',
content: `
* {
margin: 0;
padding: 0;
}`
}
// 我們接下來可以使用 hljs.highlight夜只,將代碼內(nèi)容與代碼語(yǔ)言傳入進(jìn)去
const result = hljs.highlight(code.content, {
language: code.lang
})
// 它會(huì)返回一個(gè)結(jié)果扔亥,我們打印到控制臺(tái)看看
console.log('result >>> ', result)
</script>
我們可以看到旅挤,打印出來的是一個(gè)對(duì)象粘茄,code 是它原始的代碼柒瓣,language 是它的語(yǔ)言吠架,而 value 就是它著色后的代碼磺平。
那么現(xiàn)在要做的就是將 value 添加到 code 元素里邊去。
<script>
const code = {
lang: 'css',
content: `
* {
margin: 0;
padding: 0;
}`
}
const result = hljs.highlight(code.content, {
language: code.lang
})
const codeEle = document.getElementById('code-area')
codeEle.innerHTML = result.value
</script>
我們可以看到蓄诽,代碼確實(shí)被著色了仑氛,但是和之前的有所差別,我們看一下是什么原因甫何。
打開控制后我們發(fā)現(xiàn)辙喂,用這種方式 code 元素就沒有辦法被自動(dòng)加上類樣式了巍耗,所以說我們就需要手動(dòng)給 code 加上類樣式才可以炬太。
// 通過 className 為 code 手動(dòng)添加類樣式亲族,并添加類的語(yǔ)言
codeEle.className = `hljs language-${code.lang}`
highlight.js 的語(yǔ)言支持
無(wú)論使用哪種方法,都需要注意指定代碼所屬的語(yǔ)言霎迫。
如果不指定語(yǔ)言知给,highlight.js 會(huì)嘗試自動(dòng)識(shí)別語(yǔ)言,并可能出現(xiàn)錯(cuò)誤或不準(zhǔn)確的結(jié)缘滥。
指定語(yǔ)言可以通過兩種方式:
- 在 code 標(biāo)簽中添加 class 屬性朝扼,并設(shè)置為 language-xxx 的形式擎颖,其中 xxx 是語(yǔ)言名稱搂捧。
- 在調(diào)用 highlightElement 或 highlight 方法時(shí),在第二個(gè)參數(shù)中傳入一個(gè)對(duì)象允跑,并設(shè)置 language 屬性為語(yǔ)言名稱王凑。
上圖是 highlight.js
支持的語(yǔ)言,可以看到有很多種聋丝,需要用其他語(yǔ)言的時(shí)候索烹,language
設(shè)置成指定的語(yǔ)言名稱就可以了。
原理
它的原理你可能已經(jīng)猜到了弱睦,在 highlightElement 里我們簡(jiǎn)單說了一下百姓,現(xiàn)在再看下圖:
之所以可以實(shí)現(xiàn)著色,其實(shí)就是查找和替換的過程况木,將原來的純文本替換為元素標(biāo)簽包裹文本垒拢,元素是可以加上樣式的,而樣式就是我們引入的 css 文件火惊。
這就是它的基本原理了仑嗅。
總結(jié)
其實(shí)有時(shí)候我們?nèi)ピO(shè)置 Mackdown 的自定義樣式呢,在代碼區(qū)域設(shè)置的時(shí)候也是這樣設(shè)置的兆衅,當(dāng)然類樣式的名字呢畏铆,基本上都是標(biāo)準(zhǔn)的格式楷怒。
好了刃泡,這個(gè)庫(kù)分享介紹給你了眨层,庫(kù)的原理也為你做了簡(jiǎn)單的科普叁征,希望對(duì)你有所幫助。
如果你有什么問題或建議官扣,請(qǐng)?jiān)谠u(píng)論區(qū)留言,如果你覺得這篇文章有用遭顶,請(qǐng)點(diǎn)贊收藏或分享給你的朋友鸥滨!