Dave Rupert has a new syntax highlighter: MicroLighter. He wrote about the why. There are a bunch of trade-offs with all the technologies that do this job. The trade-offs here seem pretty worth it for a relatively lightweight, infrequent syntax highlighting job. I mean 2 KB as a base library is pretty amazing, with the languages coming in even smaller. I generated a demo and fiddled around with it a little just to show it works super well on CodePen, naturally.
My favorite part about MicroLighter is how it uses the web’s Highlight API, a feature I was pretty into exploring about a year ago. The idea that it “doesn’t touch the DOM” is kind of amazing to me. I also like how Dave, as the President of Web Components, made it available as <micro-lighter>. I feel like a lot of projects like this would have gone straight for a React component or other framework-specific implementations. Dave can confidently say: you don’t need that, this will work everywhere. Which is true and satisfying these days. You not using web components is a you problem.
Which means I can now drop some hot web component links for you!
- Cool term from Ariel Salminen: Progressive Web Components, along with a library.
- If you’re curious about the encapsulation potential of web components, Cassondra Roberts’ talk Shining Light on the Shadow DOM from a few years ago is good.
- It’s very reasonable for a design system to put form-related elements within custom elements. The pseudonymous mehm8128 has an example with a
<label for="checkbox">and<fancy-checkbox id="checkbox">. So the real<input type="checkbox">is now with a Shadow DOM and the real<label>probably can’t “see” it. Well now there is a solution for this. I tested it and it works, in Chrome at least 😬. - Remy Sharp shared a trick I absolutely did not know. In Chrome DevTools,
$()maps toquerySelectorand$$()maps toquerySelectorAll. I knew that. Reminiscent of the jQuery days. But now$$$()maps to a query that goes through Shadow DOMs.