Dave Rupert 的 MicroLighter 使用 2.05 KB 的核心来不干涉 DOM

Why it matters

MicroLighter shows what becomes possible when a browser API crosses the support threshold: a familiar developer tool can shrink to a 2.05 KB core and stop rewriting page markup.

Dave Rupert 介绍了 MicroLighter，这是一个零依赖的语法高亮工具，基于浏览器的一项能力，使开发者能够为代码着色而无需在文档中填充逐令牌的 span 元素。

这个开源项目源自 Rupert 自己的 Jekyll 博客上的一次小失误。它的语法高亮失效了，使他不得不在多年来用过的工具中重新做出选择，包括 Highlight.js、PrismJS、Rouge 和 Shiki。相反，Rupert 利用这次修复工作来测试浏览器自身能处理多少高亮工作。

这对 Rupert 来说并不陌生。他在 2007 年与 Trent Walton 和 Reagan Ray 在奥斯汀创办了网页设计公司 Paravel，并花了多年时间发布一系列专注的小型网页工具。他的项目历史 包括 FitText、FitVids、Lettering.js 以及以无障碍为重点的 A11Y Project。2024 年 5 月，Rupert 加入 Microsoft，负责其 Fluent 设计系统的 web 组件工作。

MicroLighter 延续了同样的小工具直觉。根据项目主页，其核心压缩包大小为 2.05 KB，而MIT 许可的仓库 中列出没有运行时依赖。Rupert 构建它以推断代码块的语言、加载相应的语法，并对令牌进行高亮。行号、复制控件和其他界面功能则位于一个单独的自定义元素中。

让浏览器绘制令牌

传统的语法高亮通常通过在代码样例的部分周围添加元素和类来表示令牌。MicroLighter 保持代码标记不变。它扫描文本，为注释、字符串、函数和关键字等类别创建范围，然后通过 CSS.highlights.set() 注册这些范围。

CSS 通过诸如 ::highlight(keyword) 的选择器来处理展示。代码仍然不需要嵌套的令牌标记，这是 Rupert 想要避免的。

时机来自于浏览器支持。CSS Custom Highlight API 在 2025 年 6 月被主流浏览器可用后，达到了 MDN 的 Baseline 2025 指定。这种支持为开发者提供了一个实用的平台原语，用来在不改变页面 DOM 结构的情况下为任意文本范围设置样式。旧版浏览器仍可能带来兼容性限制。

MicroLighter 也继承了该 API 在样式方面的限制。Rupert 表示，自定义高亮不能应用斜体、粗体或字体变化。这使得该项目成为一种权衡：更干净的标记和更小的核心，换来的是在排版控制上不如基于 HTML 的渲染器那样灵活。

Rupert 接受这一限制，因为他的目标故意很普通。他的博客文章可能混合 HTML、CSS、JavaScript、Bash、Ruby 和 Markdown，而每个代码示例通常只有约 15 行。他需要广泛的语言覆盖，同时不希望在每个页面上都部署每一个解析器。

使用 TextMate 覆盖而无需全额前置成本

MicroLighter 使用 TextMate grammars，这是 VS Code 和其他编辑器使用的既定语言定义。该项目支持 Web 语言、系统语言、应用语言、脚本语言以及数据和配置格式，包括 JavaScript、TypeScript、Python、Rust、Go、SQL、GraphQL、Dockerfile 和 Git diff。

每个语法作为独立模块打包，只有当页面使用该语言时才会加载。正如 Rupert 在他的发布文章中写道：“这样你只为你使用的部分付费。”

这个限定对于 2.05 KB 的头条数字很重要。它描述的是压缩后的核心，而页面的总传输量会随着 MicroLighter 检索所需语法而增长。该项目没有发布与 Rupert 提到的既有高亮器之间在速度或准确性方面的独立比较。它的论点更多基于架构和包体纪律，而不是基准测试的胜利。

Rupert 还将 TextMate 的详细作用域折叠为面向主题作者的一组更小类别：注释、关键字、函数、字符串、常量、属性、标签、选择器、插入和删除。主题作者可以使用 CSS 的 light-dark() 一起定义浅色和深色配色，而无需维护两个独立的主题文件。

一个核心职责，额外功能在旁边

Rupert 最明智的产品决策之一是决定 MicroLighter 应该拒绝做什么。“我希望语法高亮只做一件事：推断语言并在该语言中高亮代码，”他写道。

需要行号或复制按钮的开发者可以添加 <micro-lighter> custom element，Rupert 在发布文章中估计这大约会增加 1 KB。Shadow DOM 将这些控件与代码内容分离，当提供的界面过于有限时，开发者可以扩展基类。

该包支持自初始化的 bundle、带有 highlightAll() 的 ESM 接口，以及可选的自定义元素。安装通过 npm install microlighter 进行。

MicroLighter 是一次刻意为之的温和发布：一个修复自己博客的开发者，发现了一个最近变得广泛可用的浏览器 API，并把结果打包发布给有相同困扰的任何人。Rupert 在其职业生涯的大部分时间里都在将此类恼人的问题变成小型公共工具。这个工具作出了一个直接的押注：现代浏览器可以取代另一层生成的标记，前提是开发者能接受浏览器的这些规则。