MicroLighter de Dave Rupert utiliza un núcleo de 2.05 KB para no tocar el DOM

Why it matters

MicroLighter shows what becomes possible when a browser API crosses the support threshold: a familiar developer tool can shrink to a 2.05 KB core and stop rewriting page markup.

Dave Rupert introdujo MicroLighter, un resaltador de sintaxis sin dependencias construido alrededor de una capacidad del navegador que permite a los desarrolladores colorear código sin llenar el documento con elementos span a nivel de token.

El proyecto de código abierto surgió a raíz de un pequeño fallo en el propio blog Jekyll de Rupert. Su resaltado de sintaxis se había roto, y él tuvo que elegir de nuevo entre herramientas que había usado a lo largo de los años, incluyendo Highlight.js, PrismJS, Rouge y Shiki. En lugar de eso, Rupert aprovechó la reparación para probar cuánto trabajo podía manejar el navegador por sí mismo.

Eso es territorio familiar para Rupert, que formó la agencia de diseño web de Austin Paravel con Trent Walton y Reagan Ray en 2007 y pasó años publicando herramientas web de enfoque reducido. Su historial de proyectos incluye FitText, FitVids, Lettering.js y el A11Y Project, enfocado en accesibilidad. En mayo de 2024, Rupert se unió a Microsoft para trabajar en web components para su sistema de diseño Fluent.

MicroLighter sigue el mismo instinto de herramienta pequeña. Su paquete comprimido principal es de 2.05 KB, según la página principal del proyecto, y el repositorio con licencia MIT no lista dependencias en tiempo de ejecución. Rupert lo construyó para inferir el lenguaje de un bloque de código, cargar la gramática correspondiente y resaltar los tokens. Los números de línea, controles para copiar y otras funciones de interfaz viven en un elemento personalizado separado.

Deja que el navegador pinte los tokens

Los resaltadores de sintaxis convencionales suelen representar tokens añadiendo elementos y clases alrededor de partes de una muestra de código. MicroLighter mantiene el marcado del código intacto. Escanea el texto, crea rangos para categorías como comentarios, cadenas, funciones y palabras clave, y luego registra esos rangos mediante CSS.highlights.set().

CSS se encarga de la presentación a través de selectores como ::highlight(keyword). El código permanece libre del marcado anidado de tokens que Rupert quería evitar.

El momento responde al soporte de los navegadores. La CSS Custom Highlight API alcanzó la designación Baseline 2025 de MDN después de volverse accesible en los principales navegadores actuales en junio de 2025. Ese soporte brinda a los desarrolladores un primitivo de plataforma práctico para estilizar rangos de texto arbitrarios sin cambiar la estructura DOM de la página. Los navegadores más antiguos todavía pueden plantear una limitación de compatibilidad.

MicroLighter también hereda los límites de estilo de la API. Rupert dice que los resaltados personalizados no pueden aplicar cursiva, texto en negrita ni cambios de tipografía. Eso convierte al proyecto en un intercambio: marcado más limpio y un núcleo más pequeño a cambio de menos control tipográfico del que puede ofrecer un renderizador basado en HTML.

Rupert acepta la limitación porque su objetivo es deliberadamente común. Sus entradas de blog pueden mezclar HTML, CSS, JavaScript, Bash, Ruby y Markdown, y cada muestra de código suele tener alrededor de 15 líneas. Necesitaba una cobertura amplia de lenguajes sin cargar todos los analizadores en cada página.

Cobertura de TextMate sin la factura inicial completa

MicroLighter usa las gramáticas de TextMate, las definiciones de lenguaje establecidas que usan VS Code y otros editores. El proyecto soporta lenguajes web, lenguajes de sistemas, lenguajes de aplicaciones, lenguajes de scripting y formatos de datos y configuración, incluyendo JavaScript, TypeScript, Python, Rust, Go, SQL, GraphQL, Dockerfile y Git diff.

Cada gramática se distribuye como su propio módulo y se carga solo cuando la página usa ese lenguaje. "De esa manera solo pagas por lo que usas", escribió Rupert en su publicación de lanzamiento.

Esa aclaración importa para la cifra principal de 2.05 KB. Describe el núcleo comprimido, mientras que la transferencia total de una página crece a medida que MicroLighter recupera las gramáticas que necesita. El proyecto no publica comparaciones independientes de velocidad o precisión frente a los resaltadores establecidos que nombra Rupert. Su caso se basa en la arquitectura y la disciplina del paquete más que en una victoria de benchmark.

Rupert también colapsó los scopes detallados de TextMate en un conjunto más pequeño de categorías pensado para humanos que crean temas: comentario, palabra clave, función, cadena, constante, propiedad, etiqueta, selector, insertado y eliminado. Los autores de temas pueden definir colores claro y oscuro juntos con CSS light-dark(), en lugar de mantener dos archivos de tema separados.

Un trabajo principal, con los extras al lado

La decisión de producto más fuerte de Rupert fue decidir qué debía negarse a hacer MicroLighter. "Quería que el resaltador de sintaxis hiciera un trabajo: inferir el lenguaje y resaltar el código en ese lenguaje", escribió.

Los desarrolladores que necesiten números de línea o un botón de copiar pueden añadir el <micro-lighter> custom element, que Rupert estima añade aproximadamente 1 KB en su publicación de lanzamiento. Shadow DOM mantiene esos controles separados del contenido del código, y los desarrolladores pueden extender la clase base cuando la interfaz suministrada sea demasiado limitada.

El paquete soporta un bundle auto-inicializable, una interfaz ESM con highlightAll(), y el elemento personalizado opcional. La instalación se realiza con npm install microlighter.

MicroLighter es un lanzamiento modesto por diseño: un desarrollador arreglando su blog, encontrando una API del navegador que recientemente se volvió ampliamente usable y empaquetando el resultado para cualquiera que tenga la misma molestia. Rupert ha pasado gran parte de su carrera convirtiendo esas molestias en pequeñas herramientas públicas. Esta apuesta sencilla sostiene que el navegador moderno puede reemplazar otra capa de marcado generado, siempre que los desarrolladores puedan vivir dentro de las reglas del navegador.