你的代碼著色好看嗎窥浪?來這里看看吧!

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

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末额湘,一起剝皮案震驚了整個(gè)濱河市毯焕,隨后出現(xiàn)的幾起案子竹捉,更是在濱河造成了極大的恐慌憨闰,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,729評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件变姨,死亡現(xiàn)場(chǎng)離奇詭異渔呵,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)饭弓,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人排霉,你說我怎么就攤上這事球订±饲矗” “怎么了胁艰?”我有些...
    開封第一講書人閱讀 169,461評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)署驻。 經(jīng)常有香客問我,道長(zhǎng)瞳别,這世上最難降的妖魔是什么征候? 我笑而不...
    開封第一講書人閱讀 60,135評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮祟敛,結(jié)果婚禮上疤坝,老公的妹妹穿的比我還像新娘。我一直安慰自己馆铁,他們只是感情好跑揉,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,130評(píng)論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著埠巨,像睡著了一般历谍。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上辣垒,一...
    開封第一講書人閱讀 52,736評(píng)論 1 312
  • 那天伐庭,我揣著相機(jī)與錄音烤镐,去河邊找鬼帘饶。 笑死柳譬,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的哥遮。 我是一名探鬼主播岂丘,決...
    沈念sama閱讀 41,179評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼眠饮!你這毒婦竟也來了奥帘?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,124評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤仪召,失蹤者是張志新(化名)和其女友劉穎寨蹋,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體扔茅,經(jīng)...
    沈念sama閱讀 46,657評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡已旧,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,723評(píng)論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了召娜。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片运褪。...
    茶點(diǎn)故事閱讀 40,872評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖玖瘸,靈堂內(nèi)的尸體忽然破棺而出秸讹,到底是詐尸還是另有隱情,我是刑警寧澤雅倒,帶...
    沈念sama閱讀 36,533評(píng)論 5 351
  • 正文 年R本政府宣布璃诀,位于F島的核電站,受9級(jí)特大地震影響蔑匣,放射性物質(zhì)發(fā)生泄漏劣欢。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,213評(píng)論 3 336
  • 文/蒙蒙 一殖演、第九天 我趴在偏房一處隱蔽的房頂上張望氧秘。 院中可真熱鬧,春花似錦趴久、人聲如沸丸相。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)灭忠。三九已至,卻和暖如春座硕,著一層夾襖步出監(jiān)牢的瞬間弛作,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評(píng)論 1 274
  • 我被黑心中介騙來泰國(guó)打工华匾, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留映琳,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,304評(píng)論 3 379
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像萨西,于是被迫代替她去往敵國(guó)和親有鹿。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,876評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容