通常情况下，我们要实现代码高亮功能，需要借助复杂的语法高亮库，例如Prism[1]或highlight.js[2]

这些库的基本原理是扫描代码，并将关键词包裹一层标签，然后通过CSS样式改变代码颜色。

但是，这种实现会导致页面非常臃肿，增加了很多额外的标签，就像这样

那么，有没有办法可以在不改变页面HTML结构的情况下高亮一段代码呢？

其实也是有的，之前写过一篇文章，可以利用 CSS Custom Highlight API[3]实现纯文本的代码高亮，有兴趣的可以回顾之前这篇文章

原生 CSS Custom Highlight 终于来了~

XboxYan，公众号：前端侦探原生 CSS Custom Highlight 终于来了~

虽然叫做“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

嗯，这里比较复杂，我也没完全弄明白，知道彩色字体有这个能力就行了。不过这些复杂的规则都不需要前端开发者来实际操作了，所有的定制都交由字体开发者来完成。

四、自定义样式

你可能发现，上面的例子中都没有定义颜色，自己就有主题色了。很方便...但是也会有困惑，如果想要自定义颜色该怎么办呢？

别急，这也是有解决方法的。前面说，这其实是个彩色字体，彩色字体中有个调色板的概念，也就是在制作字体的时候定义的一些规则和变量。

这里的变量可以通过CSS font-palette来自定义。关于font-palette的介绍，可以参考张鑫旭老师的这篇文章

超酷！CSS font-palette与彩色字体显示 « 张鑫旭-鑫空间-鑫生活 (zhangxinxu.com)[6]

你可以理解为预留的一些变量，可以额外去覆盖它，具体做法如下

通过@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 */;}}

效果如下

五、优缺点和兼容性

看了上面的一些展示，相信都能发现这种方式的优势，非常明显

1. 使用简单，引入一个字体就可以了
2. 无需JS，完全没有性能忧虑
3. 连 CSS颜色主题都不需要，已经内置好了，如果需要自定义可以额外处理
4. 没有容器限制，只要是文本，任何地方都可以支持，包括input和textarea
5. HTML
   非常干净
6. 兼容性好，支持OpenType的都可以运行，不仅仅只是 web

当然也还有一些不足

1. 字体制作比较费劲，一般同学都接触不到，不方便修改

2. 颜色类型支持有限，上面的9个可能不满足实际需求

3. 有些时候匹配可能有些问题，比如标签内的关键词，也匹配上了

   

4. 中文有时候支持有些问题

   

但总的来说，这都是一个及低成本实现代码高亮的一种方式，完全没有副作用，非常值得一试。

提一下兼容性，兼容性其实相当不错，只需要支持COLR/CPAL(v0) Font Formats即可

这里有一个非常奇葩的地方，Safari在17.0-17.1由于自身的bug导致这个支持有问题，需要注意一下。

如果希望支持颜色可配置，也就是调色板可用，需要支持font-palette特性，这个兼容性稍微差点

其实也没关系，不支持就展示默认调色板的颜色而已。