太神奇了，仅使用彩色字体实现代码高亮

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

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

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

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

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

原生 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)

#三、原理浅析

你可能会非常好奇，为啥仅仅引入了一个字体，就能实现代码高亮了呢？

说起来原理不算复杂，但操作起来比较麻烦。有兴趣可以仔细研究一下这篇文章

blog.glyphdrawing.club/font-with-b…

这里简单介绍一下，主要原理在两个方面

第一个是 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)

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

通过@font-palette-values来定义一个调色板，然后通过override-colors来改写对应的颜色值

复制@font-palette-values --myCustomPalette {
  font-family: 'FontWithASyntaxHighlighter';
  override-colors: 
    0 red, 
    1 lightblue, 
    2 yellow, 
    3 purple, 
    4 green, 
    5 orange, 
    6 black, 
    7 hotpink, 
    8 lime 
  ; 
}

然后在设置字体的地方引入就行了

复制.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:
      0 hsl(225 100% 40%), 
      1 #ccc, 
      2 yellow, 
      3 hsl(327 100% 54%), 
      4 hsl(225 100% 40%), 
      5 purple, 
      6 black, 
      7 orange, 
      8 hotpink 
    ;
  }
}

效果如下

#五、优缺点和兼容性

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

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特性，这个兼容性稍微差点

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