MicroLighter is a code syntax highlighter built on CSS Custom Highlights rather than injected markup. It leans on the ::highlight() pseudo-element, which is Baseline, and keeps themes, line numbers, multi-language support and semantic markup intact.

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

Only a small amount of JavaScript is involved. The rest leans on modern CSS, so features like light-dark() and custom properties come along for the ride and rolling a theme is doable, as is picking pieces à la carte: specific themes, only the languages you need, line numbers, or a web component.

--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);
import "microlighter/micro-lighter-element.min.js";
<micro-lighter language="javascript" controls="copy" line-numbers>
  <pre>
    <code>const answer = 42;</code>
  </pre>
</micro-lighter>

Why it matters here

Chris's custom WordPress block has plugged in Prism.js for years. Prism is robust, supports a large number of languages and is lightweight, so there is no knock against it. The appeal of MicroLighter is the dependencies you don't add.

A web font that carries syntax highlighting along with it is a similar approach, and has been running on a personal site for a while without fuss.

Swapping out Prism

Update (August 31, 2026): MicroLighter replaced Prism on the site. Performance has not been benchmarked, but the payload drop is significant: Prism was 35 KB raw (9.3 KB gzipped), while MicroLighter comes in at 13.9 KB raw (5.2 KB gzipped) — with WordPress-specific customizations baked in.