太神奇了，僅使用彩色字體實現代碼高亮

作者：XboxYan 2024-12-11 09:25:59

開發前端

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

通常情況下，我們要實現代碼高亮功能，需要借助復雜的語法高亮庫，例如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關鍵詞的簡化代碼，大概意思是

忽略if前后的，相當于匹配if本身，也就是xif和ifx這些都不算
當 i 后面跟著 f 時，用替代項 (i.alt2) 替換默認的 i
當 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 */;}}

效果如下：

圖片