--- title: "MicroLighter ditches spans for CSS's Highlight API, at 2KB" url: https://daily.dev/posts/microlighter-ditches-spans-for-css-s-highlight-api-at-2kb-v4hl2jvsq source_url: https://daily.dev/posts/microlighter-ditches-spans-for-css-s-highlight-api-at-2kb-v4hl2jvsq type: collection source: "Trends" published: 2026-08-25T14:49:39.859Z updated: 2026-08-25T14:50:22.083Z tags: ["javascript", "css", "web-components"] reading_time: 3 upvotes: 52 comments: 8 language: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # MicroLighter ditches spans for CSS's Highlight API, at 2KB **[Trends](https://daily.dev/sources/trends)** · 3 min read · 52 upvotes · 8 comments ## Summary MicroLighter is a new syntax-highlighting library from Dave Rupert that uses the CSS Custom Highlights API's `::highlight()` pseudo-element instead of the traditional span-per-token approach, avoiding DOM bloat entirely. It weighs about 2KB by loading TextMate grammars (the same format VS Code uses) on demand rather than bundling all languages and themes upfront. It merges light and dark themes via CSS's `light-dark()` function, and keeps extras like line numbers in a separate Shadow DOM web component so the core stays minimal. It's positioned not as a Shiki or Prism replacement but as a lightweight option for blogs and docs sites. ## Content Syntax highlighting has basically meant the same thing since forever: wrap every token in a ``, slap a class on it, let CSS do the coloring. It works, but it's DOM bloat, and anyone who's inspected a Prism.js-highlighted code block knows the markup soup that results. MicroLighter, a new library from Dave Rupert, throws that whole approach out. Instead of injecting spans, it uses the CSS Custom Highlights API, specifically the `::highlight()` pseudo-element, which hit Baseline this year. That means highlighting happens without touching the DOM at all. The text stays as plain text; CSS just paints ranges of it based on highlight registrations from JavaScript. No wrapper elements, no markup explosion, no fighting with copy-paste behavior because your code got chopped into forty nested spans. The size difference is the headline number here: about 2KB, next to the hundreds of KB some highlighters ship once you count themes and language grammars. MicroLighter gets there by using TextMate grammars, the same format VS Code uses under the hood, and loading them on demand rather than bundling everything up front. Only need Python and JSON highlighting? That's all that loads. A few other choices stand out. Light and dark themes merge through CSS's `light-dark()` function instead of needing separate stylesheets or a theme-toggling class dance. Extras like line numbers live in a separate `` web component built on Shadow DOM, so the core highlighter stays lean and you only pull in the component if you actually want it. Everything is modular: import the languages, themes, or component pieces you need and skip the rest. It ships as an npm package, an ESM module, or a self-initializing minified bundle for people who just want to drop a script tag in and move on. The reaction so far leans toward quiet approval rather than fireworks, which honestly feels right for a tool this scoped. This isn't trying to replace Shiki or Prism for people who need every edge case covered. It's aimed at the person who wants readable code blocks on a blog or docs site without shipping a highlighting library heavier than the page content it's decorating. The Custom Highlights API has been sitting there as a browser feature for a while; MicroLighter is one of the first tools to actually build around it instead of treating it as a curiosity. If more libraries start leaning on `::highlight()` instead of span-injection, this might end up looking like the first domino rather than a one-off experiment. ## Questions this post answers ### How does MicroLighter achieve syntax highlighting without wrapping code tokens in span elements? MicroLighter uses the CSS Custom Highlights API's `::highlight()` pseudo-element to paint colors onto ranges of plain text based on highlight registrations made in JavaScript, avoiding any DOM manipulation. This eliminates the markup bloat typical of span-based highlighters like Prism.js, and also avoids copy-paste issues caused by code being split into many nested span elements. _Developers weighing syntax-highlighter options can track new browser-API-based tools like this one on daily.dev._ ### Why is MicroLighter only about 2KB compared to other syntax highlighting libraries? MicroLighter stays around 2KB by loading TextMate grammars, the same grammar format VS Code uses internally, on demand instead of bundling every language and theme upfront. If a page only needs Python and JSON highlighting, only those grammars load, unlike many highlighters that ship hundreds of KB covering themes and language grammars regardless of use. _Anyone picking a lightweight highlighter for a docs site can follow tools like this on daily.dev._ ## Community discussion Top comments from developers on daily.dev. **@jibonkrishnaroy** · 1 upvotes > Nice brother **@pdfopsdev** · 1 upvotes > the real win here isn't the 2kb, it's not blowing up copy-paste and find-in-page with a wall of spans. only gotcha is Highlight API is still patchy on older Safari/Firefox versions so you need a span fallback if your docs traffic skews old browsers. **@nthadam** · 0 upvotes > What about the `` tag? Isn't that semantically correct for something like highlighting? **@petermrozek** · 0 upvotes > It's always nice to see another ultra-small library that does the same things bigger ones do. And this one is as modern as it can. 🙂 > > That being said, I'll still stick to microlight.js. It's smaller (well, same base size, but doesn't require additional grammar files) and has those aesthetics that just work for me (it adjusts to the color scheme of the website instead of doing the regular color coding, while still maintaining readability). Not that modern to not use spans, though. **@varstahl** · 0 upvotes > Can’t wait to use this. I didn't quite like much of the other solutions, that worked but where unfathomably slow. --- Tags: [#javascript](https://daily.dev/tags/javascript), [#css](https://daily.dev/tags/css), [#web-components](https://daily.dev/tags/web-components) [View this post on daily.dev](https://daily.dev/posts/microlighter-ditches-spans-for-css-s-highlight-api-at-2kb-v4hl2jvsq)