一个 2KB、零依赖、基于 CSS Highlight API 的微型语法高亮器
来源:daverupert.com — 2026-08-19
📋 概述
作者意外做了一个名为 MicroLighter 的客户端语法高亮器:约 2KB(压缩+gzip)、零依赖,使用 CSS Custom Highlights API 而非注入 span 标签来实现高亮,并复用 Textmate 的语法文法。它支持按需加载所有语言与文法、人类可读的 light-dark() 主题,并把除高亮外的所有功能移入 自定义元素。通过 CSS ::highlight() 伪元素,它避免了任何 DOM 变更,把库的职责收窄到「扫描代码块并用 CSS.highlights.set 高亮」。
🔑 核心要点
- 使用 CSS Custom Highlights API 而非注入 span 标签实现高亮。
- 约 2KB(压缩+gzip)、零依赖。
- 复用 Textmate 的语法文法(VS Code 同款),按需加载所有语言。
- 提供人类可读的 light-dark() 主题,其余功能放入
micro-lighter 自定义元素。
💡 金句
把「我要高亮这个 token」这件事,用 CSS 而不是 DOM 手术来表达。
👍 0
👎 0
← 返回 Lobsters 首页