MicroLighter: Syntax Highlighter | CSS-Tricks

[kasenur]

Here we go! Syntax highlighting for code blocks without the complicated markup, spans, classes, and bloated JavaScript, courtesy of Uncle Dave.

<code class="language-javascript">const answer = 42;</code>
</pre>

MicroLighter is pretty much straight-up CSS leaning on Custom Highlights, using the ::highlight() pseudo… which is Baseline this year!

It accomplishes exactly every we need around here at CSS-Tricks — themes, line numbers, multiple language support, semantic markup, etc. — but without the added dependencies we rely on.

Chris made a custom WordPress block years and years ago that plugs in Prism.js. There’s certainly nothing wrong with Prism. It’s robust, supports a crap-ton of languages, is also super lightweight, and plenty battled-tested. Either way, I’ll certainly be looking at integrating this into our WordPress block.

It’s not that there isn’t any JavaScript involved. It’s that less of it is needed. And it leans so hard into modern CSS that it brings things like light-dark() support and custom properties along for the ride, meaning rolling your own theme is totally doable.

--syntax-background: light-dark(#ffffff, #0d1117);
--syntax-foreground: light-dark(#24292f, #c9d1d9);
--syntax-comment: light-dark(#6e7781, #8b949e);
--syntax-keyword: light-dark(#cf222e, #ff7b72);
--syntax-operator: light-dark(#24292f, #c9d1d9);
--syntax-string: light-dark(#0a3069, #a5d6ff);
--syntax-constant: light-dark(#0550ae, #79c0ff);
--syntax-function: light-dark(#8250df, #d2a8ff);
--syntax-type: light-dark(#8250df, #d2a8ff);
--syntax-variable: light-dark(#953800, #ffa657);
--syntax-property: light-dark(#0550ae, #79c0ff);
--syntax-tag: light-dark(#116329, #7ee787);
--syntax-selector: light-dark(#8250df, #d2a8ff);
--syntax-inserted: light-dark(#116329, #7ee787);
--syntax-deleted: light-dark(#cf222e, #ff7b72);

Plus, it’s super modular in the sense that you can snag the things you want à la carte: specific themes, just the languages you need to support, line numbers, a web component.

import "microlighter/micro-lighter-element.min.js";

<micro-lighter language="javascript" controls="copy" line-numbers>

<code>const answer = 42;</code>

Reminds me too of this clever little web font that brings syntax highlighting along for the ride. I’ve been happily using that on my personal site for a while without any fuss.