Repolode
Enviar
davatron5000

davatron5000/microlighter

Resaltador de sintaxis para JavaScript sin dependencias, que usa la CSS Custom Highlight API en lugar de envolver cada token en elementos span.

Ver en GitHubSitio web
Estrellas
1,055
Forks
33
Issues abiertos
22
Último commit
el mes pasado

¿Qué es?

MicroLighter es un pequeño resaltador de sintaxis para páginas web. Lee gramáticas TextMate y aplica colores mediante la CSS Custom Highlight API del navegador, de modo que los bloques de código mantienen un marcado limpio, sin elementos span para los tokens. La biblioteca ocupa unos 2 KiB comprimida y no tiene dependencias en tiempo de ejecución.

Incluye 37 lenguajes que se cargan bajo demanda y 10 temas integrados configurados mediante propiedades personalizadas de CSS. Se puede usar con la función programática `highlightAll()`, un script de ejecución automática que responde al evento `syntax-highlight`, un enlace CDN o el componente web opcional `<micro-lighter>`, que añade botones para copiar y números de línea.

El tokenizador usa la RegExp nativa del navegador en lugar de Oniguruma o WebAssembly. Así mantiene el paquete pequeño, a costa de ofrecer menos cobertura de lenguajes y precisión de las gramáticas que herramientas más completas como Shiki.

Funciones clave

  • 01Ocupa aproximadamente 2 KiB comprimido y no tiene dependencias en tiempo de ejecución
  • 02Resalta código sin insertar elementos span para los tokens en el DOM
  • 03Admite 37 lenguajes que se cargan bajo demanda a partir de gramáticas TextMate
  • 04Incluye 10 temas configurables mediante propiedades personalizadas de CSS
  • 05Ofrece API programática, automática y de componente web
  • 06Permite editar como texto plano los bloques de código resaltados

Casos de uso

  • Añadir resaltado de sintaxis ligero a un sitio de documentación o blog
  • Resaltar código en un componente web editable o en un editor de código en el navegador
  • Proyectos que buscan resaltado sin una dependencia de gran tamaño como Shiki

Inicio rápido

  1. 1

    Instala el paquete

    npm install microlighter
  2. 2

    Importa un tema y ejecuta el resaltador en JavaScript

    import "microlighter/themes/github.css"; import { highlightAll } from "microlighter"; document.body.dataset.syntaxTheme = "github"; await highlightAll();

Antes de usarlo

  • La cobertura de lenguajes y la precisión gramatical son más limitadas que en herramientas más completas como Shiki.
  • Usa la API CSS Custom Highlight, por lo que el navegador debe ser compatible con ella.

Temas

#syntax-highlighting#css-highlight-api#textmate-grammar#javascript#web-components#frontend-library#css#css-highlight#css3#syntax

Preguntas frecuentes

¿Qué es microlighter?
Resaltador de sintaxis para JavaScript sin dependencias, que usa la CSS Custom Highlight API en lugar de envolver cada token en elementos span. MicroLighter es un pequeño resaltador de sintaxis para páginas web. Lee gramáticas TextMate y aplica colores mediante la CSS Custom Highlight API del navegador, de modo que los bloques de código mantienen un marcado limpio, sin elementos span para los tokens. La biblioteca ocupa unos 2 KiB comprimida y no tiene dependencias en tiempo de ejecución.
¿microlighter es gratuito? ¿Qué licencia tiene?
microlighter es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿microlighter sigue mantenido?
Actualizado en los últimos 6 meses. El último commit de microlighter fue el 11 sept 2026.
¿Para qué puedo usar microlighter?
Añadir resaltado de sintaxis ligero a un sitio de documentación o blog Resaltar código en un componente web editable o en un editor de código en el navegador Proyectos que buscan resaltado sin una dependencia de gran tamaño como Shiki
¿Cómo se instala microlighter?
Instala el paquete: npm install microlighter Importa un tema y ejecuta el resaltador en JavaScript: import "microlighter/themes/github.css"; import { highlightAll } from "microlighter"; document.body.dataset.syntaxTheme = "github"; await highlightAll();
¿Dónde consigo microlighter?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/davatron5000/microlighter

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados