TECH Signal 398
MicroLighter ships a 2kb client-side syntax highlighter built on the CSS Custom Highlights API
↗
Illustration only Photo by Tim Simon on Unsplash
MicroLighter is a new zero-dependency client-side syntax highlighter that uses the CSS Custom Highlights API and Textmate grammars, with on-demand language loading and light-dark themes.
For engineers who embed code in static sites, MicroLighter offers a way to highlight syntax without DOM mutation or span injection, using the browser's native Highlight API. It keeps the bundle small by loading grammars on demand and moves extra UI features into a custom element. The trade-off is that the CSS ::highlight() pseudo-element does not support italics, bold, or font swapping, so styling is limited to color and background.
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 to avoid DOM mutation and span injection.
It loads Textmate language grammars on demand, keeping the core library around 2kb minified and gzipped.
Extra features like line numbers and copy controls are moved to a <micro-lighter> custom element.
THE CLUSTER