我制作了一个小型的客户端语法高亮工具，名为 MicroLighter，它使用 CSS 自定义高亮 API。我稍后会谈谈我为何制作它，但首先我想……咳……强调……一些功能。零依赖，~2kb 最小化+压缩；使用 CSS ::highlight(token-name)，而不是 spans；利用 Textmate 的语言语法；人类可读的 light-dark() 主题；所有语言/语法按需加载；将所有非高亮功能移动到 <micro-lighter> 自定义元素中。在某个时候，我在我的 Jekyll 博客上破坏了语法高亮。我多年来使用过几款语法高亮工具（Highlight.js、PrismJS、Rouge、Shiki 等等），我体会到了不同客户端和服务器端实现之间的权衡。面对再次选择时，我知道我想探索 Bramus 使用 CSS 自定义高亮 API 的语法高亮技术。使用 CSS ::highlight() 伪类存在一些限制：没有斜体、没有加粗、没有字体替换——但除此之外，这是一个相当酷的语法，可以通过 CSS 自义表达“我想高亮这个标记”，而不是到处注入 spans。使用高亮 API 意味着我避免了任何 DOM 变更，库的范围缩小到：使用正则表达式模式扫描代码块，并发送 CSS.highlights.set(category, textRanges) 来高亮代码块。我在这个网站上对语法高亮的需求并不大，并不是所有文章都有代码，而且我的代码示例最多只有十五行。我面临的难题是语言频繁切换。我会在同一篇文章中使用 HTML、CSS 和 JavaScript。这里一点 bash，那里一点 ruby，偶尔还有 markdown。当我使用这么多语言时，复杂性超出了我的正则表达式能力，因此我决定依赖 Textmate 与 VS Code 共享的已有模式集合。在我意识到之前，我的小高亮工具几乎可以处理任何语言。鉴于我经常使用不同的语言，我设定的一个原则是所有语言语法都应按需自动加载，以减少配置和包的大小。这样你只为所使用的支付费用。受到 PrismJS 简化标记类别的启发，我将 Textmate 的细粒度标记类别简化为更人性化的集合，使其更易于样式化。此外，我对代码块样式的一个巨大挑剔是，浅色主题和深色主题是独立的实体，因此我将它们合并为一个主题，使用 light-dark()。我融入的最后一个重大观点是，我希望语法高亮工具仅执行一项工作：推断语言并高亮该语言的代码。在此指导原则下，我将所有额外功能（如行号等）转移到网络组件。原生网络组件的大小增加了约 ~1 KiB，但是将 UI 与原生自定义元素这样的 UI 原语共同放置是正确的选择，而 ShadowDOM 封装使代码与表面 UI 易于分离。显然，我是一个网络组件爱好者，但这种关注点的良好分离与将所有内容挤入核心库相比，感觉更好。试试吧。要开始使用这个工具，我建议使用自初始化的最小化捆绑包，但我也提供 ESM 和一个网络组件。npm install microlighter <script type="module" src="path/to/microlighter/microlighter.min.js"></script> 如我上面所说，并非我的所有帖子都有语法高亮，因此我甚至等到知道有代码页面时才导入脚本。if(document.querySelector('pre>code').length) { import('path/to/microlighter/microlighter.min.js'); } 如果你要自己做一些高级的东西，可以使用 ESM 版本：import { highlightAll } from 'microlighter' highlightAll({ selector: 'pre.onlyTheseGetHighlights' }) 如果你想利用我提到的那些额外功能，你也可以使用网络组件：<micro-lighter data-syntax-theme="github" line-numbers controls="copy"> <pre><code>代码在这里</code></pre> </micro-lighter> 网络组件类也是相当扩展的，所以如果我不支持你需要的某些功能，你可以通过扩展基类并添加自己的功能来“分叉”它。最后，你可以使用提供的主题之一，或者自己设计一个。基本结构是：/** * 设置语义 `--syntax-*` 令牌 * @value 背景 | 前景 | 注释 | 关键字 | * 操作符 | 字符串 | 常量 | 函数 | 类型 | 变量 | * 属性 | 标签 | 选择器 | 插入 | 删除 */ [data-syntax-theme="my-theme-name"] { color-scheme: light dark; /*代码块令牌*/ --syntax-background: light-dark(#f8f8f8, #3a3a3a); --syntax-foreground: light-dark(#3a3a3a, #f8f8f8); /*高亮令牌*/ --syntax-comment: light-dark(#6e7781, #8b949e); --syntax-function: light-dark(#8250df, #d2a8ff); /* ...等等... */ } [data-syntax-theme="my-theme-name"] pre:has(code) { background-color: var(--syntax-background); color: var(--syntax-foreground) } ::highlight(comment) { color: var(--syntax-comment) } ::highlight(function) { color: var(--syntax-function) } /* ...等等... */ 而这就是 MicroLighter