MicroLighter: Ein winziger Syntax-Highlighter, der auf Textmate-Grammatiken setzt

Introducing MicroLighter

Dave Rupert stellt MicroLighter vor, einen schlanken Client-seitigen Syntax-Highlighter (~2 KB gzipped), der die CSS Custom Highlights API nutzt. Statt DOM-Mutationen setzt er auf `::highlight()`-Pseudo-Elemente und Textmate-Sprachgrammatiken, die on-demand geladen werden. Themes nutzen `light-dark()` für helle und dunkle Modi. Zusätzliche Funktionen wie Zeilennummern sind in ein Web Component (`<micro-lighter>`) ausgelagert. Der Autor erklärt seine Motivation: Er brauchte einen Highlighter, der viele Sprachen kann, ohne aufzublähen.

„Mit der Highlight-API vermeide ich jede DOM-Mutation, und der Umfang der Bibliothek schrumpft auf: Codeblöcke mit Regex-Mustern scannen und `CSS.highlights.set(category, textRanges)` senden, um die Codeblöcke hervorzuheben.“

Mehr von diesem Tag

2026-08-19