LANGUAGES Signal 98
MicroLighter uses CSS Custom Highlights for syntax highlighting without heavy JavaScript
↗
MicroLighter is a syntax highlighter that leverages the CSS Custom Highlights API (::highlight()) to provide code highlighting with minimal JavaScript, modular language support, and built-in light-dark() theming via custom properties.
For engineers embedding code blocks in sites or apps, this offers a lighter alternative to libraries like Prism.js by pushing highlighting logic into CSS rather than JavaScript. The approach reduces dependencies while still supporting themes, line numbers, and multiple languages through an à la carte module system.
Written by elseif from the cluster below · every claim links back to a sourceThe three things worth knowing
MicroLighter uses the CSS Custom Highlights API (::highlight()), which is Baseline this year, to avoid injecting spans and classes into markup.
Theming relies on CSS custom properties with light-dark() support, making light and dark mode handling automatic without JavaScript toggling.
Modules can be included à la carte, specific languages, themes, line numbers, or a web component, rather than bundling everything.
THE CLUSTER