HeadlinesBriefing favicon HeadlinesBriefing.com

MicroLighter: CSS Custom Highlights Syntax Highlighter

Hacker News •
×

Introducing MicroLighter, a smol client-side syntax highlighter leveraging the CSS Custom Highlights API. At ~2kb minified+gzipped with zero dependencies, it uses CSS ::highlight() instead of injected spans.

MicroLighter scans code blocks with regex patterns and applies Textmate language grammars, loading all grammars on-demand to reduce bundle size. It supports human-readable light-dark() themes and moves non-highlight features to a <micro-lighter> custom element.

Created after the author broke syntax highlighting on their Jekyll blog, MicroLighter addresses the complexity of swapping between languages like HTML, CSS, JavaScript, bash, and Ruby. By flattening Textmate's granular tokens into simplified categories inspired by Prism JS, styling becomes easier.

The library focuses solely on language inference and highlighting, with extras like line-numbers handled by an extendible web component (~1 Ki B). Usage includes a self-initialing minified bundle, ESM imports, and the web component for advanced features.