如果你想在網(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)贊收藏或分享給你的朋友鸥滨！
