太神奇了，僅使用彩色字體實(shí)現(xiàn)代碼高亮
通常情況下，我們要實(shí)現(xiàn)代碼高亮功能，需要借助復(fù)雜的語法高亮庫，例如Prism[1]或highlight.js[2]
圖片
這些庫的基本原理是掃描代碼，并將關(guān)鍵詞包裹一層標(biāo)簽，然后通過CSS樣式改變代碼顏色。
但是，這種實(shí)現(xiàn)會(huì)導(dǎo)致頁面非常臃腫，增加了很多額外的標(biāo)簽，就像這樣：
圖片
那么，有沒有辦法可以在不改變頁面HTML結(jié)構(gòu)的情況下高亮一段代碼呢？
雖然叫做“CSS Custom Highlight API”，但還是有大量 JS腳本運(yùn)行，因?yàn)樾枰ㄟ^JS去手動(dòng)匹配那些關(guān)鍵詞，只是不需要額外創(chuàng)建標(biāo)簽而已。
現(xiàn)如今，又有一種方式可以實(shí)現(xiàn)代碼高亮了，僅僅只需要引入一個(gè)字體，而且使用起來更簡單，一起看看吧！
一、快速上手
首先我們準(zhǔn)備一個(gè)容器，任意都行，就直接用pre標(biāo)簽吧
<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;}效果如下：
圖片
很簡單，一個(gè)黑底白字的效果。
接下來，只需要引入一個(gè)特殊的字體，叫做 FontWithASyntaxHighlighter-Regular.woff2，這是一個(gè)特制的字體
@font-face{font-family:'FontWithASyntaxHighlighter';src:url('/FontWithASyntaxHighlighter-Regular.woff2')format('woff2');}pre{font-family:"FontWithASyntaxHighlighter", monospace;}神奇的一幕就發(fā)生了，原本單調(diào)的代碼立刻變得有活力起來~
圖片
除此之外，無需任何額外操作，結(jié)束~
二、更多場景
除了上面的CSS語法高亮，HTML也不在話下，例如：
圖片
嘗試了一下JavaScript，也能很好支持
圖片
更為關(guān)鍵的一點(diǎn)是，對于編輯器沒有任何要求，甚至可以直接在textarea中展示高亮代碼。
<textarea></textarea>這是以前方式都實(shí)現(xiàn)不了，是不是非常厲害？
你可以訪問以下在線鏈接體驗(yàn)一下
- CSS FontWithASyntaxHighlighter (codepen.io)[4]
- CSS FontWithASyntaxHighlighter (juejin.cn)[5]
三、原理淺析
你可能會(huì)非常好奇，為啥僅僅引入了一個(gè)字體，就能實(shí)現(xiàn)代碼高亮了呢？
說起來原理不算復(fù)雜，但操作起來比較麻煩。有興趣可以仔細(xì)研究一下這篇文章
https://blog.glyphdrawing.club/font-with-built-in-syntax-highlighting/
這里簡單介紹一下，主要原理在兩個(gè)方面：
第一個(gè)是 OpenType COLR，這是彩色字體的一種規(guī)范。
圖片
這個(gè)可能大家都見到過，就是這些字體會(huì)自帶顏色。但是不同于普通彩色字體，這些字符同一個(gè)字符會(huì)對應(yīng)多個(gè)字形，比如下面A.alt、A.alt2、A.alt3等，不同的字形對應(yīng)不同的顏色和功能。
圖片
那么這些字體是怎么在不同的場景下顯示不同的顏色呢？比如同樣的o這里就出現(xiàn)了3種顏色，如下
圖片
很明顯，這里需要區(qū)分上下文，也就是第二個(gè)原理，叫做OpenType contextual alternates。
簡單來講，就是在字體設(shè)計(jì)之初，就考慮了上下文，會(huì)匹配相鄰字符，如果滿足了某些條件，就優(yōu)先選擇這一類映射，其實(shí)就是是替換了字形。
至于這里的匹配規(guī)則，就有點(diǎn)復(fù)雜了，舉個(gè)例子：
ignore sub @AllLetters i' f, i' f @AllLetters;sub i' f by i.alt2;sub i.alt2 f' by f.alt2;這是一段替換if關(guān)鍵詞的簡化代碼，大概意思是
- 忽略if前后的，相當(dāng)于匹配if本身，也就是xif和ifx這些都不算
- 當(dāng) i 后面跟著 f 時(shí)，用替代項(xiàng) (i.alt2) 替換默認(rèn)的 i
- 當(dāng) i.alt2 后面跟著 f 時(shí)，用替代項(xiàng) (f.alt2) 替換默認(rèn)的 f
嗯，這里比較復(fù)雜，我也沒完全弄明白，知道彩色字體有這個(gè)能力就行了。不過這些復(fù)雜的規(guī)則都不需要前端開發(fā)者來實(shí)際操作了，所有的定制都交由字體開發(fā)者來完成。
四、自定義樣式
你可能發(fā)現(xiàn)，上面的例子中都沒有定義顏色，自己就有主題色了。很方便...但是也會(huì)有困惑，如果想要自定義顏色該怎么辦呢？
別急，這也是有解決方法的。前面說，這其實(shí)是個(gè)彩色字體，彩色字體中有個(gè)調(diào)色板的概念，也就是在制作字體的時(shí)候定義的一些規(guī)則和變量。
你可以理解為預(yù)留的一些變量，可以額外去覆蓋它，具體做法如下：
通過@font-palette-values來定義一個(gè)調(diào)色板，然后通過override-colors來改寫對應(yīng)的顏色值
@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 */;}然后在設(shè)置字體的地方引入就行了。
.highlight{font-family:"FontWithASyntaxHighlighter", monospace;font-palette:--myCustomPalette;/*使用調(diào)色板*/}這里可以改寫的地方總共有9個(gè)，分別對應(yīng)不同的含義。
比如位置1的地方表示comments，也就是注釋，改寫以后就變成了淡藍(lán)色，如下：
有了這些變量，結(jié)合媒體查詢，你就可以輕松實(shí)現(xiàn)一套自適應(yīng)深淺主題的代碼高亮了
@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 */;}}效果如下：
圖片
五、優(yōu)缺點(diǎn)和兼容性
看了上面的一些展示，相信都能發(fā)現(xiàn)這種方式的優(yōu)勢，非常明顯
- 使用簡單，引入一個(gè)字體就可以了
- 無需JS，完全沒有性能憂慮
- 連 CSS顏色主題都不需要，已經(jīng)內(nèi)置好了，如果需要自定義可以額外處理
- 沒有容器限制，只要是文本，任何地方都可以支持，包括input和textarea
- HTML非常干凈
- 兼容性好，支持OpenType的都可以運(yùn)行，不僅僅只是 web
當(dāng)然也還有一些不足
- 字體制作比較費(fèi)勁，一般同學(xué)都接觸不到，不方便修改
- 顏色類型支持有限，上面的9個(gè)可能不滿足實(shí)際需求
- 有些時(shí)候匹配可能有些問題，比如標(biāo)簽內(nèi)的關(guān)鍵詞，也匹配上了
圖片
- 中文有時(shí)候支持有些問題
但總的來說，這都是一個(gè)及低成本實(shí)現(xiàn)代碼高亮的一種方式，完全沒有副作用，非常值得一試。
提一下兼容性，兼容性其實(shí)相當(dāng)不錯(cuò)，只需要支持COLR/CPAL(v0) Font Formats即可。
圖片
這里有一個(gè)非常奇葩的地方，Safari在17.0-17.1由于自身的bug導(dǎo)致這個(gè)支持有問題，需要注意一下。
如果希望支持顏色可配置，也就是調(diào)色板可用，需要支持font-palette特性，這個(gè)兼容性稍微差點(diǎn)
圖片
其實(shí)也沒關(guān)系，不支持就展示默認(rèn)調(diào)色板的顏色而已。
[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/
