通常情况下，我们要实现代码高亮功能，需要借助复杂的语法高亮库，例如Prism或highlight.js
这些库的基本原理是扫描代码，并将关键词包裹一层标签，然后通过CSS样式改变代码颜色。
但是，这种实现会导致页面非常臃肿，增加了很多额外的标签，就像这样
那么，有没有办法可以在不改变页面HTML结构的情况下高亮一段代码呢？
其实也是有的，之前写过一篇文章，可以利用 CSS Custom Highlight API实现纯文本的代码高亮，有兴趣的可以回顾之前这篇文章
虽然叫做“CSS Custom Highlight API”，但还是有大量 JS脚本运行，因为需要通过JS去手动匹配那些关键词，只是不需要额外创建标签而已。
现如今，又有一种方式可以实现代码高亮了，仅仅只需要引入一个字体，而且使用起来更简单，一起看看吧
一、快速上手
首先我们准备一个容器，任意都行，就直接用pre标签吧
1<pre>
2html,body{
3 margin:0;
4 height: 100%;
5}
6.edit{
7 border: 0;
8 width: 100%;
9 height: 100%;
10 overflow: auto;
11 background-color: #000;
12 color: #f1f1f1;
13 padding: .5rem;
14}
15</pre>
简单修饰一下
1pre{
2 display: block;
3 font-size: 20px;
4 box-sizing: border-box;
5 border: 0;
6 width: 1000px;
7 max-width: 100%;
8 min-height: 400px;
9 field-sizing: content;
10 background-color: #000;
11 color: #f1f1f1;
12 padding: 1rem;
13 border: 2px solid #1d1d1d;
14 border-radius: .5rem;
15 margin: 0 auto;
16}
效果如下
很简单，一个黑底白字的效果。
接下来，只需要引入一个特殊的字体，叫做 FontWithASyntaxHighlighter-Regular.woff2，这是一个特制的字体
1@font-face {
2 font-family: 'FontWithASyntaxHighlighter';
3 src:
4 url('/FontWithASyntaxHighlighter-Regular.woff2')
5 format('woff2')
6 ;
7}
8pre {
9 font-family: "FontWithASyntaxHighlighter", monospace;
10}
神奇的一幕就发生了，原本单调的代码立刻变得有活力起来~
除此之外，无需任何额外操作，结束~
二、更多场景
除了上面的CSS语法高亮，HTML也不在话下，例如
尝试了一下JavaScript，也能很好支持
更为关键的一点是，对于编辑器没有任何要求，甚至可以直接在textarea中展示高亮代码
1<textarea></textarea>
这是以前方式都实现不了，是不是非常厉害？
你可以访问以下在线链接体验一下
三、原理浅析
你可能会非常好奇，为啥仅仅引入了一个字体，就能实现代码高亮了呢？
说起来原理不算复杂，但操作起来比较麻烦。有兴趣可以仔细研究一下这篇文章
这里简单介绍一下，主要原理在两个方面
第一个是 OpenType COLR，这是彩色字体的一种规范。
这个可能大家都见到过，就是这些字体会自带颜色。但是不同于普通彩色字体，这些字符同一个字符会对应多个字形，比如下面A.alt、A.alt2、A.alt3等，不同的字形对应不同的颜色和功能
那么这些字体是怎么在不同的场景下显示不同的颜色呢？比如同样的o这里就出现了3种颜色，如下
很明显，这里需要区分上下文，也就是第二个原理，叫做OpenType contextual alternates。
简单来讲，就是在字体设计之初，就考虑了上下文，会匹配相邻字符，如果满足了某些条件，就优先选择这一类映射，其实就是是替换了字形。
至于这里的匹配规则，就有点复杂了，举个例子
1ignore sub @AllLetters i' f, i' f @AllLetters;
2sub i' f by i.alt2;
3sub i.alt2 f' by f.alt2;
这是一段替换if关键词的简化代码，大概意思是
- 忽略
if前后的，相当于匹配if本身，也就是xif和ifx这些都不算 - 当
i后面跟着f时，用替代项 (i.alt2) 替换默认的i - 当
i.alt2后面跟着f时，用替代项 (f.alt2) 替换默认的f
嗯，这里比较复杂，我也没完全弄明白，知道彩色字体有这个能力就行了。不过这些复杂的规则都不需要前端开发者来实际操作了，所有的定制都交由字体开发者来完成。
四、自定义样式
你可能发现，上面的例子中都没有定义颜色，自己就有主题色了。很方便…但是也会有困惑，如果想要自定义颜色该怎么办呢？
别急，这也是有解决方法的。前面说，这其实是个彩色字体，彩色字体中有个调色板的概念，也就是在制作字体的时候定义的一些规则和变量。
这里的变量可以通过CSS font-palette来自定义。关于font-palette的介绍，可以参考张鑫旭老师的这篇文章
你可以理解为预留的一些变量，可以额外去覆盖它，具体做法如下
通过@font-palette-values来定义一个调色板，然后通过override-colors来改写对应的颜色值
1@font-palette-values --myCustomPalette {
2 font-family: 'FontWithASyntaxHighlighter';
3 override-colors:
4 0 red,
5 1 lightblue,
6 2 yellow,
7 3 purple,
8 4 green,
9 5 orange,
10 6 black,
11 7 hotpink,
12 8 lime
13 ;
14}
然后在设置字体的地方引入就行了
1.highlight {
2 font-family: "FontWithASyntaxHighlighter", monospace;
3 font-palette: --myCustomPalette;
4}
这里可以改写的地方总共有9个，分别对应不同的含义。
比如位置1的地方表示comments，也就是注释，改写以后就变成了淡蓝色，如下
有了这些变量，结合媒体查询，你就可以轻松实现一套自适应深浅主题的代码高亮了
1@media (prefers-color-scheme: light) {
2 .highlight {
3 background: #eee;
4 color: #333;
5 }
6 @font-palette-values --myCustomPalette {
7 font-family: "FontWithASyntaxHighlighter";
8 override-colors:
9 0 hsl(225 100% 40%),
10 1 #ccc,
11 2 yellow,
12 3 hsl(327 100% 54%),
13 4 hsl(225 100% 40%),
14 5 purple,
15 6 black,
16 7 orange,
17 8 hotpink
18 ;
19 }
20}
效果如下
五、优缺点和兼容性
看了上面的一些展示，相信都能发现这种方式的优势，非常明显
- 使用简单，引入一个字体就可以了
- 无需
JS，完全没有性能忧虑 - 连
CSS颜色主题都不需要，已经内置好了，如果需要自定义可以额外处理 - 没有容器限制，只要是文本，任何地方都可以支持，包括
input和textarea HTML非常干净- 兼容性好，支持
OpenType的都可以运行，不仅仅只是web
当然也还有一些不足
-
字体制作比较费劲，一般同学都接触不到，不方便修改
-
颜色类型支持有限，上面的
9个可能不满足实际需求 -
有些时候匹配可能有些问题，比如标签内的关键词，也匹配上了
-
中文有时候支持有些问题
但总的来说，这都是一个及低成本实现代码高亮的一种方式，完全没有副作用，非常值得一试。
提一下兼容性，兼容性其实相当不错，只需要支持COLR/CPAL(v0) Font Formats即可
这里有一个非常奇葩的地方，Safari在17.0-17.1由于自身的bug导致这个支持有问题，需要注意一下。
如果希望支持颜色可配置，也就是调色板可用，需要支持font-palette特性，这个兼容性稍微差点
其实也没关系，不支持就展示默认调色板的颜色而已。