太神奇了，仅使用彩色字体实现代码高亮通常情况下，我们要实现代码高亮功能，需要借助复杂的语法高亮库，例如Prism或hig

本文为稀土掘金技术社区首发签约文章，30天内禁止转载，30天后未获授权禁止转载，侵权必究！

欢迎关注我的公众号：前端侦探

通常情况下，我们要实现代码高亮功能，需要借助复杂的语法高亮库，例如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关键词的简化代码，大概意思是

忽略if前后的，相当于匹配if本身，也就是xif和ifx这些都不算
当 i 后面跟着 f 时，用替代项 (i.alt2) 替换默认的 i
当 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, /* keywords, {} */
    1 lightblue, /* comments */
    2 yellow, /* literals */
    3 purple, /* numbers */
    4 green, /* functions, [] */
    5 orange, /* js others */
    6 black, /* not in use */
    7 hotpink, /* inside quotes, css properties, few chars */
    8 lime /* 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:
      0 hsl(225 100% 40%), /* keywords, {} */
      1 #ccc, /* comments */
      2 yellow, /* literals */
      3 hsl(327 100% 54%), /* numbers */
      4 hsl(225 100% 40%), /* functions, [] */
      5 purple, /* js others */
      6 black, /* not in use */
      7 orange, /* inside quotes, css properties, few chars */
      8 hotpink /* few chars */
    ;
  }
}