Developer Dave Rupert Releases MicroLighter Syntax Highlighter Powered by CSS Custom Highlights API

Web developer Dave Rupert has announced the launch of MicroLighter, a lightweight client-side syntax highlighting library built around the browser's CSS Custom Highlights API. As first reported by Hacker News, the utility offers web developers an alternative method for highlighting code blocks on websites without injecting inline HTML markup or mutating the underlying document structure.

Rupert developed the project after syntax highlighting broke on his personal Jekyll blog. Over his career, Rupert had deployed a variety of client-side and server-side syntax highlighters—including Highlight.js, PrismJS, Rouge, and Shiki—and experienced the technical trade-offs associated with each framework. When evaluating a replacement, he chose to explore a technique pioneered by developer Bramus, which leverages modern browser styling capabilities through the CSS Custom Highlights API.

MicroLighter functions by decoupling code parsing from document layout manipulation. Traditional web-based syntax tools alter the Document Object Model (DOM) by inserting span tags around individual code tokens, increasing DOM complexity and triggering potential performance overhead. In contrast, MicroLighter scans code blocks using regular expression patterns and directly registers text ranges using the native CSS.highlights.set(category, textRanges) browser method, leaving the existing DOM untouched.

While the underlying CSS ::highlight() pseudo-element presents certain presentation limitations—such as a current lack of support for font swapping, italics, and bold styling—it allows developers to idiomatically declare highlight rules via native CSS. Rupert noted that omitting DOM manipulation significantly reduced the scope and execution footprint of the underlying JavaScript codebase.

To address scenarios where developer posts contain multiple programming languages within a single entry—such as HTML, CSS, JavaScript, Bash, Ruby, and Markdown—MicroLighter utilizes Textmate pattern collections. These are the same grammar definition sets deployed within Microsoft's Visual Studio Code editor. To reduce configuration overhead and minimize overall bundle size, the engine dynamically loads individual language grammars on demand, ensuring sites only download the necessary syntax rules for code present on a given page.

Drawing inspiration from PrismJS's token structure, Rupert flattened Textmate's detailed token classifications into a streamlined set of human-friendly categories to simplify styling workflows. Additionally, MicroLighter addresses theme separation by merging light and dark visual themes into a single stylesheet rule using the native CSS light-dark() function, eliminating the need to maintain distinct color schemes for different display modes.

Under Rupert's architectural approach, MicroLighter's core library is restricted strictly to inferring programming languages and applying basic syntax highlights. Supplemental features such as line numbers are relegated to an optional native web component that adds roughly 1 kibibyte in size. By leveraging custom elements and Shadow DOM encapsulation, the web component isolates presentation UI from standard site content while maintaining developer extendibility through standard class inheritance.

The software is distributed across several modular formats, including a minified self-initializing bundle, an ECMAScript Module (ESM) package, and the native web component. Site operators can load the utility conditionally only when code blocks exist on a page, or extend the web component base class to build custom syntax features and themes.