MicroLighter:2KB 的 CSS 语法高亮新方案
Introducing MicroLighter
我开发了一款名为 MicroLighter 的轻量级客户端语法高亮工具,它利用 CSS Custom Highlights API 实现,体积仅约 2KB 且零依赖。与传统方案不同,它不再向 DOM 注入 span 标签,而是通过 CSS 伪类直接高亮代码。该工具集成了 Textmate 的语法规则,支持按需加载语言,并巧妙地将光暗主题合并为统一的 light-dark() 变量。为了保持核心库的纯粹,我将行号等额外功能移到了自定义 Web 组件中。如果你厌倦了庞大的 Highlight.js 或 PrismJS,这个专注于单一职责的新方案或许正是你需要的。
使用 Highlight API 意味着我无需操作 DOM,库的作用范围缩小为:使用正则模式扫描代码块,并调用 CSS.highlights.set 来高亮代码。