MicroLighter:一个零依赖、基于 CSS Custom Highlights API 的微型语法高亮器
来源:daverupert.com — 2026-08
📋 概述
Dave Rubert 介绍了自己无意间做出来的微型客户端语法高亮器 MicroLighter。它零依赖、压缩后约 2KB,利用 CSS Custom Highlights API(::highlight 伪元素)而非注入 span 标签来标记 token,并借助 Textmate 的语法定义,支持浅色/深色主题,按需加载所有语言的语法。作者在自己 Jekyll 博客上换过多款高亮器(Highlight.js、PrismJS、Rouge、Shiki 等)后,受 Bramus 关于 CSS Custom Highlights API 的技术启发,干脆把高亮逻辑收进一个 自定义元素。
🔑 核心要点
- 零依赖、压缩+gzip 后约 2KB 的微型客户端高亮器。
- 用 CSS ::highlight(token-name) 而非注入 span 来做高亮,避免 DOM 变更。
- 复用 Textmate 语法定义,支持浅色/深色主题,语言按需加载。
- 把非高亮功能全部收进
<micro-lighter> 自定义元素。
💡 金句
哎,我做出来了一个语法高亮器。用 CSS 而非 span 来表达「我想高亮这个 token」,反倒更利落。
👍 0
👎 0
← 返回 Lobsters 首页