通常情況下，我們要實現代碼高亮功能，需要借助復雜的語法高亮庫，例如Prism[1]或highlight.js[2]

圖片

這些庫的基本原理是掃描代碼，并將關鍵詞包裹一層標簽，然后通過CSS樣式改變代碼顏色。

但是，這種實現會導致頁面非常臃腫，增加了很多額外的標簽，就像這樣：

圖片

那么，有沒有辦法可以在不改變頁面HTML結構的情況下高亮一段代碼呢？

雖然叫做“CSS Custom Highlight API”，但還是有大量 JS腳本運行，因為需要通過JS去手動匹配那些關鍵詞，只是不需要額外創建標簽而已。

現如今，又有一種方式可以實現代碼高亮了，僅僅只需要引入一個字體，而且使用起來更簡單，一起看看吧！

一、快速上手

首先我們準備一個容器，任意都行，就直接用pre標簽吧

<pre>html,body{margin:0;height: 100%;}.edit{border: 0;width: 100%;height: 100%;overflow: auto;background-color: #000;color: #f1f1f1;padding: .5rem;}</pre>

簡單修飾一下

pre{display: block;font-size:20px;box-sizing: border-box;border:0;width:1000px;max-width:100%;min-height:400px;field-sizing: content;background-color:#000;color:#f1f1f1;padding:1rem;border:2px solid#1d1d1d;border-radius:.5rem;margin:0 auto;}

效果如下：

圖片

很簡單，一個黑底白字的效果。

接下來，只需要引入一個特殊的字體，叫做 FontWithASyntaxHighlighter-Regular.woff2，這是一個特制的字體

@font-face{font-family:'FontWithASyntaxHighlighter';src:url('/FontWithASyntaxHighlighter-Regular.woff2')format('woff2');}pre{font-family:"FontWithASyntaxHighlighter", monospace;}

神奇的一幕就發生了，原本單調的代碼立刻變得有活力起來~

圖片

除此之外，無需任何額外操作，結束~

二、更多場景

除了上面的CSS語法高亮，HTML也不在話下，例如：

圖片

嘗試了一下JavaScript，也能很好支持

圖片

更為關鍵的一點是，對于編輯器沒有任何要求，甚至可以直接在textarea中展示高亮代碼。

<textarea></textarea>

這是以前方式都實現不了，是不是非常厲害？

你可以訪問以下在線鏈接體驗一下

• CSS FontWithASyntaxHighlighter (codepen.io)[4]
• CSS FontWithASyntaxHighlighter (juejin.cn)[5]

三、原理淺析

你可能會非常好奇，為啥僅僅引入了一個字體，就能實現代碼高亮了呢？

說起來原理不算復雜，但操作起來比較麻煩。有興趣可以仔細研究一下這篇文章

https://blog.glyphdrawing.club/font-with-built-in-syntax-highlighting/

這里簡單介紹一下，主要原理在兩個方面：

第一個是 OpenType COLR，這是彩色字體的一種規范。

圖片

這個可能大家都見到過，就是這些字體會自帶顏色。但是不同于普通彩色字體，這些字符同一個字符會對應多個字形，比如下面A.alt、A.alt2、A.alt3等，不同的字形對應不同的顏色和功能。

圖片

那么這些字體是怎么在不同的場景下顯示不同的顏色呢？比如同樣的o這里就出現了3種顏色，如下

圖片

很明顯，這里需要區分上下文，也就是第二個原理，叫做OpenType contextual alternates。

簡單來講，就是在字體設計之初，就考慮了上下文，會匹配相鄰字符，如果滿足了某些條件，就優先選擇這一類映射，其實就是是替換了字形。

至于這里的匹配規則，就有點復雜了，舉個例子：

ignore sub @AllLetters i' f, i' f @AllLetters;sub i' f by i.alt2;sub i.alt2 f' by f.alt2;

這是一段替換if關鍵詞的簡化代碼，大概意思是

1. 忽略if前后的，相當于匹配if本身，也就是xif和ifx這些都不算
2. 當 i 后面跟著 f 時，用替代項 (i.alt2) 替換默認的 i
3. 當 i.alt2 后面跟著 f 時，用替代項 (f.alt2) 替換默認的 f

嗯，這里比較復雜，我也沒完全弄明白，知道彩色字體有這個能力就行了。不過這些復雜的規則都不需要前端開發者來實際操作了，所有的定制都交由字體開發者來完成。

四、自定義樣式

你可能發現，上面的例子中都沒有定義顏色，自己就有主題色了。很方便...但是也會有困惑，如果想要自定義顏色該怎么辦呢？

別急，這也是有解決方法的。前面說，這其實是個彩色字體，彩色字體中有個調色板的概念，也就是在制作字體的時候定義的一些規則和變量。

你可以理解為預留的一些變量，可以額外去覆蓋它，具體做法如下：

通過@font-palette-values來定義一個調色板，然后通過override-colors來改寫對應的顏色值

@font-palette-values--myCustomPalette{font-family:'FontWithASyntaxHighlighter';override-colors:0red,/* keywords, {} */1lightblue,/* comments */2yellow,/* literals */3purple,/* numbers */4green,/* functions, [] */5orange,/* js others */6black,/* not in use */7hotpink,/* inside quotes, css properties, few chars */8lime/* few chars */;}

然后在設置字體的地方引入就行了。

.highlight{font-family:"FontWithASyntaxHighlighter", monospace;font-palette:--myCustomPalette;/*使用調色板*/}

這里可以改寫的地方總共有9個，分別對應不同的含義。

比如位置1的地方表示comments，也就是注釋，改寫以后就變成了淡藍色，如下：

有了這些變量，結合媒體查詢，你就可以輕松實現一套自適應深淺主題的代碼高亮了

@media(prefers-color-scheme: light){.highlight{background:#eee;color:#333;}@font-palette-values--myCustomPalette{font-family:"FontWithASyntaxHighlighter";override-colors:0hsl(225100%40%),/* keywords, {} */1#ccc,/* comments */2yellow,/* literals */3hsl(327100%54%),/* numbers */4hsl(225100%40%),/* functions, [] */5purple,/* js others */6black,/* not in use */7orange,/* inside quotes, css properties, few chars */8hotpink/* few chars */;}}

效果如下：

圖片

五、優缺點和兼容性

看了上面的一些展示，相信都能發現這種方式的優勢，非常明顯

• 使用簡單，引入一個字體就可以了
• 無需JS，完全沒有性能憂慮
• 連 CSS顏色主題都不需要，已經內置好了，如果需要自定義可以額外處理
• 沒有容器限制，只要是文本，任何地方都可以支持，包括input和textarea
• HTML非常干凈
• 兼容性好，支持OpenType的都可以運行，不僅僅只是 web

當然也還有一些不足

• 字體制作比較費勁，一般同學都接觸不到，不方便修改
• 顏色類型支持有限，上面的9個可能不滿足實際需求
• 有些時候匹配可能有些問題，比如標簽內的關鍵詞，也匹配上了

圖片

• 中文有時候支持有些問題

但總的來說，這都是一個及低成本實現代碼高亮的一種方式，完全沒有副作用，非常值得一試。

提一下兼容性，兼容性其實相當不錯，只需要支持COLR/CPAL(v0) Font Formats即可。

圖片

這里有一個非常奇葩的地方，Safari在17.0-17.1由于自身的bug導致這個支持有問題，需要注意一下。

如果希望支持顏色可配置，也就是調色板可用，需要支持font-palette特性，這個兼容性稍微差點

圖片

其實也沒關系，不支持就展示默認調色板的顏色而已。

[1]Prism： https://prismjs.com/

[2]highlight.js： https://highlightjs.org/

[3]CSS Custom Highlight API： https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API

[4]CSS FontWithASyntaxHighlighter (codepen.io)： https://codepen.io/xboxyan/pen/mdZpoRG

[5]CSS FontWithASyntaxHighlighter (juejin.cn)： https://code.juejin.cn/pen/7404060763410661385

[6]超酷！CSS font-palette與彩色字體顯示： https://www.zhangxinxu.com/wordpress/2022/07/css-font-palette/