MicroLighter: A 2KB Syntax Highlighter Powered by CSS Custom Highlights
Introducing MicroLighter
Dave Rupert introduces MicroLighter, a tiny client-side syntax highlighter that leverages the CSS Custom Highlights API instead of injecting spans. It uses Textmate grammars for language support, auto-loads grammars on demand, and offers light-dark() themes. The core library focuses solely on highlighting, while extra features like line numbers are delegated to a custom element. This approach avoids DOM mutation and keeps the bundle size minimal.
Using the Highlight API means I avoid any DOM mutation and the scope of the library shrinks down to: scan code blocks using regex patterns and send CSS.highlights.set(category, textRanges) to highlight the code blocks.