La detección automática, y cuándo conviene anularla
El resaltado lo hace highlight.js, ejecutándose como JavaScript en tu pestaña. Hay diecinueve módulos de gramática conectados, cada uno cargado bajo demanda, dieciocho lenguajes reales más texto plano, y el desplegable muestra 22 entradas porque JSX y TSX se apoyan en las gramáticas de JavaScript y TypeScript, y HTML se apoya en la de XML. Un nombre de lenguaje que no esté en la lista cae en la detección automática en lugar de dar error.
Deja el selector en automático y highlight.js puntúa tu fragmento contra las diecinueve gramáticas y
se queda con la ganadora. Eso funciona bien con cualquier cosa que tenga una forma distintiva: un
bloque def de Python, una sopa de etiquetas HTML, un comando de shell con opciones. Funciona bastante
peor con entradas cortas o ambiguas, y la razón es estructural, no un fallo. Un objeto JSON de tres
líneas también es Python válido, y un SELECT de SQL en minúsculas se parece mucho a prosa normal.
Cinco líneas sencillamente no llevan señal suficiente para que una puntuación por confianza sea
fiable.
Así que la regla práctica es: déjalo en automático para cualquier cosa de más de unas diez líneas, y fija el lenguaje explícitamente para un fragmento corto. Nombrar el lenguaje se salta la detección y carga solo esa gramática, lo que además es marginalmente más rápido.
Tema, fondo, y qué sobrevive a un proyector
Vienen cinco temas: Dracula, GitHub Dark, Nord, Monokai y One Light. En lugar de empaquetar el CSS de temas del propio highlight.js, cada uno es un mapa de colores de token escrito a mano, que es la razón por la que los cinco cubren exactamente las mismas clases de token y ninguno tiene un color de comentario que caiga en silencio al color de texto por defecto.
Elegir entre ellos va sobre todo de a dónde va la imagen. Dracula y Monokai son temas oscuros muy saturados que quedan muy bien en pantalla y pueden perder sus palabras clave rosas y verdes en un proyector deslavado. Nord es el de menor contraste de los cinco y el más seguro para impresión. One Light es la única opción clara y la elección correcta para una presentación de fondo blanco, porque un bloque de código oscuro sobre una página blanca se lleva la mirada del lector de todo lo que hay alrededor.
Los fondos son independientes de los temas: tres degradados (morado, azul y naranja), un oscuro sólido o transparente. Los degradados existen porque un marco de código flotando sobre blanco plano parece sin terminar en redes sociales. Si vas a componer el marco dentro de tu propio diseño, elige transparente y deja que tu maquetación ponga el fondo.
Escapado, aislamiento y código que no tienes permiso para filtrar
Una herramienta que convierte texto pegado arbitrario en HTML y lo representa es un objetivo evidente de inyección, así que esta tiene dos defensas independientes, y la primera se verificó contra la biblioteca real en lugar de fiarse de la documentación.
highlight.js escapa mientras tokeniza: cada <, >, & y " de tu entrada vuelve como entidad
HTML, para todas las gramáticas, incluido el caso en que el código es genuinamente HTML y elegiste el
lenguaje html a propósito. La batería de tests dispara cargas reales (una etiqueta <script>, un
<img onerror>, un intento de romper el </code></pre> que lo envuelve) a través de la biblioteca
sin simular, para varios lenguajes, y comprueba el escapado cada vez.
Encima de eso, el documento ensamblado se representa dentro de un iframe aislado con el scripting desactivado antes de que se ejecute la captura. Ni siquiera un fallo futuro en la construcción de plantillas de esta herramienta, digamos un campo de pie añadido más tarde sin escapar, podría ejecutar nada. Y como las dos etapas son locales, tu fragmento nunca cruza la red: el resaltado es una llamada a función y la captura lee un marco oculto de tu propia pestaña. Esa es la parte que importa cuando el código viene de un repositorio privado o de una función sin publicar.
El import dinámico que solo fallaba en un navegador de verdad
Merece la pena dejarlo escrito, porque es una trampa. La forma natural de cargar diecinueve
gramáticas bajo demanda es un único import interpolado: construir la ruta a partir del nombre del
lenguaje y llamar a import() sobre ella. Esa versión pasaba todos los tests de Node, porque el
resolutor de Node no tiene ninguna dificultad con un especificador montado en tiempo de ejecución.
En un navegador real fallaba directamente. Vite solo puede reescribir un import dinámico en una URL
resoluble cuando el especificador es una cadena estática que puede analizar en tiempo de compilación,
así que la versión interpolada se publicaba como un especificador pelado que el propio resolutor de
módulos del navegador rechazaba. Lo pillamos conduciendo el servidor de desarrollo con un navegador
real, no leyendo la salida compilada. El arreglo es la cosa tediosa que el archivo hace ahora:
diecinueve sentencias import explícitas en una tabla de consulta. Esa es además la razón de que la
lista de lenguajes esté curada en lugar de ser “todo lo que highlight.js sabe hacer”, porque cada
gramática tiene que estar nombrada en el código.
De fragmento pegado a PNG
- Pega tu código en la caja. La indentación se conserva literalmente, y los tabuladores se representan como dos espacios.
- Fija el lenguaje (o déjalo en automático), un tema de color y un fondo.
- Activa o desactiva la barra de título de ventana y fija el relleno del marco entre 0 y 128 píxeles.
- Genera y descarga el PNG.
El relleno es el aire exterior entre la ventana de código y el borde de la imagen, dibujado con el color o degradado de fondo. El valor por defecto de 48 va bien para redes sociales; bájalo a 0 cuando pienses colocar el marco dentro de una maquetación que ya tiene sus propios márgenes.
