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.
- piratebroadcast
I'm not trying to be rude or unappreciative, but it's kinda crazy to me that the website itself doesn't contain the demo of the thing? I see sample code to implement it on my own site, but the site itself doesn't seem to have any highlighting or I highlighted some text and didn't see anything unusual? Maybe it's just me, maybe I'm missing something here? I'd like to see an example of what a thing does before straight up installing the code on my website.
- relativeadv
good to see dave still out there doing his thing
- xigoi
Really cool! It’s a shame that the CSS Highlight API only allows changing the color and not the font.