Tu resaltado de código está matando el rendimiento ⚠️
Llevamos años aceptando que para tener un Syntax Highlighting decente necesitamos cargar librerías pesadas que llenan nuestro HTML de spans y clases innecesarias. El problema es evidente: más JavaScript significa más ti
Artículo
Una lectura sobre tecnología y sistemas digitales, escrita para ir al punto y dejar claras las ideas principales.
Tema principal
desarrollo frontend
Fuente
dev.to
Puntos clave
- Llevamos años aceptando que para tener un Syntax Highlighting decente necesitamos cargar librerías pesadas que llenan nuestro HTML de spans y clases innecesarias.
- El problema es evidente: más JavaScript significa más tiempo de ejecución, un DOM más sucio y un impacto directo en el Core Web Vitals.
- La clave hoy está en dejar de delegar todo al JS y empezar a confiar en el motor del navegador.
- MicroLighter es un gran ejemplo de este cambio de paradigma usando la nueva CSS Custom Highlights API (::highlight()):
Bloque 1
Llevamos años aceptando que para tener un Syntax Highlighting decente necesitamos cargar librerías pesadas que llenan nuestro HTML de spans y clases innecesarias.
El problema es evidente: más JavaScript significa más tiempo de ejecución, un DOM más sucio y un impacto directo en el Core Web Vitals.
Bloque 2
La clave hoy está en dejar de delegar todo al JS y empezar a confiar en el motor del navegador.
MicroLighter es un gran ejemplo de este cambio de paradigma usando la nueva CSS Custom Highlights API (::highlight()):
Bloque 3
• Estilizado nativo: Permite resaltar código sin manipular el DOM ni añadir markup redundante. • Soporte light-dark(): Implementación de temas claro y oscuro directamente en CSS, sin lógica de JS. • Carga modular: Solo integras los lenguajes que realmente necesitas, reduciendo el bundle size. • Rendimiento optimizado: Menos dependencias significan un renderizado mucho más fluido.
Ojo, no es la solución perfecta: aún tenemos limitaciones en el estilo (como la imposibilidad de usar negritas o cursivas mediante esta API), pero la dirección es clara: menos JS, más CSS.
Bloque 4
¿Siguen usando librerías pesadas en sus proyectos o ya están migrando a soluciones basadas en CSS nativo?