Lobsters | 📄 原文链接 | 2026-08-20 收录

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 的技术启发,干脆把高亮逻辑收进一个 自定义元素。

🔑 核心要点

💡 金句

哎,我做出来了一个语法高亮器。用 CSS 而非 span 来表达「我想高亮这个 token」,反倒更利落。
← 返回 Lobsters 首页