Resaltador de sintaxis
Colorea un listado, copia el marcado
Este resaltador de sintaxis divide un archivo en cadenas, comentarios, palabras clave y números, y luego pinta cada uno. Copia el resultado como HTML escapado, como bloque para procesador de textos o como texto plano sin color. Nada de lo que pegas sale del navegador.
- GratisPrecio
- 12Lenguajes
- 4Salidas
- NingunaSubidas
Syntax Highlighter
Colour a listing in twelve languages, then copy escaped HTML, a word processor block, plain text or the stylesheet
If you use a screen reader, the plain text tab is the readable copy: the coloured ones carry a span around every token.
Ready. Paste a listing, or press one of the sample buttons.
Qué hace un resaltador de sintaxis
Un color es una afirmación sobre lo que es un trozo de texto. Por lo tanto, un listado resaltado es más fácil de leer. El lector aprende la forma de un archivo antes de leer una sola línea.
Ese es todo el trabajo de este resaltador de sintaxis. Divide el texto en tokens, decide qué es cada uno y da un color a cada clase.
Conoce doce lenguajes y trata una cadena, un comentario, una palabra clave, un número y un nombre como cosas distintas. Como la decisión sale de un tokenizador y no de una coincidencia de patrones, una palabra clave dentro de un comentario sigue siendo comentario.
De una sola pasada salen cuatro resultados. HTML escapado para pegar en una página, un bloque para procesador de textos, texto plano y una pequeña hoja de estilos solo con los colores.
Todo se ejecuta en esta pestaña. Por lo tanto, un listado sin terminar se colorea exactamente igual que uno publicado.
Cómo divide el código en tokens un resaltador de sintaxis
El lector recorre el texto una vez, con un estado y una pila. En cada carácter decide si está dentro de una cadena, un comentario, un número o código normal. Emite un token cuando cambia ese estado.
Una lista de palabras clave por lenguaje aporta el resto. La lista es corta a propósito, porque la pregunta útil es qué palabras reserva el lenguaje. Esa lista de reservadas es la que publican los documentos de la norma.
Como el lector conserva ese estado, una palabra dentro de un comentario no es una palabra clave. Esa es la diferencia entre un resaltador y un buscar y reemplazar. También es lo primero que conviene mirar cuando un listado coloreado se ve mal.
Un lenguaje que anida comentarios de bloque necesita un contador de profundidad en lugar de una marca. Uno que permite plantillas literales necesita una pila. Ambos se mantienen para que un delimitador interior no pueda cerrar un bloque exterior.
Nada de esto cambia el texto que recibe el lector. Una copia de la salida plana es exactamente lo que pegaste, byte a byte, algo importante cuando el listado salió de una terminal.
Por qué la salida escapa antes de colorear
El código resaltado es marcado, y el marcado pegado en una página es marcado que el navegador ejecuta. Así que los símbolos de ángulo de un listado tienen que convertirse en entidades antes de que pase nada más.
No es un detalle de formato. Un fragmento copiado de un gestor de incidencias puede llevar una etiqueta script, y una página que lo pega sin escapar acaba de ejecutar código de un desconocido.
Aquí cada salida escapa primero y colorea después. Como el escape ocurre antes de que la herramienta escriba un solo span, un listado no puede introducir un elemento propio.
La misma regla vale para un atributo. Un comentario con comillas va al texto del span y no a un atributo. Así que no puede cerrar nada antes de tiempo.
Por eso conviene copiar el resultado HTML desde aquí y no desde un editor que colorea solo para mostrar. Los colores se ven iguales y solo uno de ellos es seguro de pegar.
Los doce lenguajes y lo que necesita cada uno
Cuatro comparten gramática con un hermano. JavaScript, TypeScript y JSON están tan cerca que un solo lector cubre los tres. CSS y SCSS comparten lector de la misma forma.
La familia C añade una línea de preprocesador. El lector toma aparte una línea con almohadilla antes de dividir el resto. Por eso include y define salen de otro color que el código que los rodea.
Python y Ruby necesitan tener en cuenta la sangría. Una cadena con triples comillas y un heredoc no terminan en un salto de línea. Así que el lector tiene que mantener la cadena abierta entre líneas.
PHP y HTML se entrelazan, así que el lector cambia de modo en la etiqueta de apertura. Como las dos gramáticas son distintas, una pasada única que ignorara el cambio colorearía el HTML como si fuera PHP.
SQL y Bash son los dos últimos, y ambos se basan en líneas. La marca de comentario es distinta entre ellos, y es el tipo de detalle que decide si un listado se lee bien.
Las cuatro salidas y cuándo usar cada una
El HTML escapado es la primera, y es la de una página. Cada token se convierte en un span con una clase. La herramienta escapa el texto como entidades, así que el bloque entra en una entrada sin más trabajo.
El bloque para procesador de textos es la segunda. Como un procesador de textos ignora tu hoja de estilos, los colores llegan como estilos en línea en cada span, y así sobreviven al pegarlos en un documento.
El texto plano es la tercera, y conserva la sangría y el número de líneas sin un solo color. Úsalo cuando el listado va a una terminal o a un mensaje de commit, donde el marcado sería ruido.
La hoja de estilos es la cuarta. Lleva las doce reglas de color sin marcado. Así que un sitio que ya envuelve sus propios spans puede adoptar la paleta sin adoptar la salida.
En esta página
- La herramienta
- Qué hace un resaltador de sintaxis
- Cómo usar el resaltador de sintaxis
- Por qué usar este resaltador de sintaxis
- Hábitos que mantienen legible un listado
- Seis formas en que un listado resaltado sale mal
- Preguntas sobre el resaltador de sintaxis
- Herramientas que van con esta
Sigue leyendo
Cómo usar el resaltador de sintaxis
Cuatro pasos, y ninguno necesita cuenta.
- 1
Elige el lenguaje
Elige entre los doce. La lista de palabras clave y las marcas de comentario salen de este ajuste. Por lo tanto, una elección equivocada es la causa habitual de un listado coloreado a medias.
- 2
Pega el listado
Luego pega el código. La sangría se conserva tal como la pegas, así que un archivo ya ordenado se lee igual que en un editor.
- 3
Ajusta la numeración y el tema
Después, decide si los números de línea van en el resultado y elige una paleta clara u oscura. Como ambas opciones entran en el marcado, ajústalas antes de copiar.
- 4
Copia el formato que necesites
Por último, toma el HTML, el bloque para procesador de textos, el texto plano o la hoja de estilos. Después, pégalo donde corresponda el listado.
Por qué usar este resaltador de sintaxis
Cinco razones, y la segunda es la que más importa.
Escapa antes de colorear
Como el texto se escapa primero como entidades, un listado pegado no puede introducir un elemento ni un atributo propio. Así que el resultado es seguro para una página.
Conserva el estado, no patrones
Una palabra clave dentro de un comentario sigue siendo comentario, y una llave dentro de una cadena sigue siendo texto. Por lo tanto, los colores coinciden con lo que el lenguaje significa de verdad.
Cuatro salidas de una sola pasada
Una página, un procesador de textos, una terminal y una hoja de estilos quieren formas distintas. Así que un solo pegado cubre la que necesites después.
No se sube nada
La división en tokens y el coloreado ocurren solo en esta pestaña. Por eso, una hoja de estilos sin publicar recibe el mismo trato.
Las reglas de color son tuyas
La salida de hoja de estilos lleva la paleta sin marcado. Por eso, un sitio que ya envuelve sus propios spans puede adoptar los colores y nada más.
Hábitos que mantienen legible un listado
Seis hábitos que deciden si el código coloreado ayuda de verdad.
- Muestra el fragmento más corto que demuestre la idea Un listado de treinta líneas se hojea y uno de seis se lee. Como el lector busca la forma y no el archivo entero, recorta antes de colorear.
- Conserva la sangría tal como la escribió el autor Reindentar un fragmento cambia su aspecto respecto al archivo de origen. Así que deja la profundidad como está y deja que el lector la compare con la fuente.
- Usa la numeración solo a partir de diez líneas Los números de línea ayudan cuando alguien tiene que citar una línea. Por debajo de diez líneas son ruido junto a un código que se puede contar.
- Ajusta la paleta a la página Un bloque oscuro en un artículo claro aparta la vista del argumento. Como tienes las dos paletas, elige la que encaje con la página que lo rodea.
- Copia el HTML y no el bloque mostrado Arrastrar un bloque coloreado fuera del navegador pierde las clases y deja un lío de estilos en línea. Por lo tanto, usa el botón de copiar, que escribe un marcado legible.
- Guarda una copia en texto plano para la terminal El marcado en un mensaje de commit o en una sesión de shell se vuelve caracteres en lugar de color. Así que guarda la salida plana junto a la coloreada.
Seis formas en que un listado resaltado sale mal
Cada una se ve bien en la vista previa y falla donde llega.
Pegar marcado sin escapar en una página
Ojo aquí. Un listado pegado sin escapar es marcado que el navegador ejecuta, y basta una etiqueta script en un comentario. Así que usa la salida HTML en lugar de copiar desde otro editor.
Elegir el lenguaje equivocado
La lista de palabras clave de un lenguaje deja sin color las de otro. Como el resultado sigue pareciendo intencionado, es fácil publicarlo sin querer.
Esperar que una plantilla literal termine en un salto de línea
Una comilla invertida mantiene una cadena abierta entre líneas. Por eso, una plantilla sin cerrar al principio colorea el resto del archivo como una sola cadena, y parece un fallo de la herramienta.
Colorear un diff como código fuente
Un más o un menos al inicio de una línea no forma parte del lenguaje. Así que pega los dos lados por separado, o el primer carácter de cada línea ya estará mal.
Activar la numeración en un fragmento que se copiará
Quien copia un listado numerado se lleva los números con el código. Como entonces lo pegado no funciona, deja la numeración para una página que solo se lee.
Suponer que los colores tienen significado
Un color por sí solo es una señal débil para quien no puede verlo. Por lo tanto, las palabras importan más que la paleta, y un listado debería entenderse también sin color.
Preguntas sobre el resaltador de sintaxis
¿Este resaltador de sintaxis es gratis?
Sí. No hay cuenta, ni límite, ni plan de pago. Así que puedes colorear tantos listados como quieras.
¿Qué lenguajes admite?
Doce: JavaScript, TypeScript, JSON, HTML, CSS, SCSS, PHP, Python, Ruby, Java, SQL y Bash. Cuatro de ellos comparten lector con un lenguaje hermano.
¿Es seguro pegar el resultado en una página?
El resultado HTML sí, porque la herramienta escapa el texto como entidades antes de escribir un solo span. Por eso, una etiqueta script dentro de un fragmento pegado llega como texto y no como elemento.
¿Adónde van los símbolos de ángulo?
Se convierten en entidades, así que el navegador los muestra en lugar de leerlos como marcado. Esa es justamente la razón de existir del resultado escapado.
¿Por qué no se colorea una palabra clave de mi comentario?
Porque está dentro de un comentario, y el lector lo sabe. Un resaltador que coloreara solo por la escritura se equivocaría aquí, mientras que este decide según el estado.
¿Puedo obtener el resultado sin marcado?
Sí. La salida de texto plano conserva la sangría y el número de líneas y no añade color. Es la copia para un mensaje de commit o una terminal.
¿Funciona en un procesador de textos?
Sí, mediante la salida para procesador de textos. Como un documento ignora las hojas de estilo, los colores llegan como estilos en línea en cada span.
¿Puedo usar los colores en mi propio sitio?
Sí. La salida de hoja de estilos lleva las doce reglas sin marcado, así que tus propios spans pueden adoptar la paleta.
¿Se sube mi código a algún sitio?
No. La división en tokens y el coloreado ocurren en esta pestaña del navegador. Por eso, un archivo sin publicar nunca cruza la red.
¿Cambia mi código?
No. La salida plana es exactamente lo que pegaste, byte a byte, y la salida coloreada solo difiere en los spans alrededor del texto.
¿Puedo resaltar un archivo entero?
Sí. Un archivo de unos miles de líneas se colorea en un momento, y el límite es tu equipo, no una cuota de servidor.
¿Revisa mi código en busca de errores?
No. Un resaltador responde qué es un token, no si el programa es válido. Así que usa el validador para esa pregunta.
¿Puedo resaltar un diff?
No directamente, porque un más o un menos al inicio de una línea no forma parte del lenguaje. Así que pega los dos lados por separado.
¿Numera las líneas?
Sí, si se lo pides. La columna de números entra en el resultado, así que decide antes de copiar, y déjala fuera en un fragmento que alguien vaya a pegar.
¿Para qué sirve la opción clara y oscura?
Cambia la paleta para que el bloque encaje con la página que lo rodea. Los tokens son los mismos en ambos casos, y solo cambian los colores.
¿Maneja una plantilla literal en varias líneas?
Sí. Como el lector mantiene la cadena abierta en un salto de línea, una plantilla de varias líneas se colorea como una sola cadena y no como código.
¿Puedo colorear un listado para una diapositiva?
Para eso sirve la salida para procesador de textos. Así que pega el bloque en el documento y conservará sus colores.
¿Por qué mi listado parece coloreado a medias?
La causa habitual es una cadena o un comentario sin cerrar más arriba, que se traga las líneas siguientes. Así que revisa primero el principio del texto pegado.
¿Funciona en el móvil?
Sí. Los paneles se apilan y las pestañas se reparten en filas. Así que un listado corto es posible lejos del escritorio, aunque un archivo largo es más cómodo con teclado.
¿Necesito una cuenta o una extensión?
No. No hay registro, ni plugin, ni extensión que añadir. Así que cierras la pestaña en cuanto el listado está en el portapapeles.
Herramientas que van con esta
Cuatro páginas a las que suele llevar este mismo trabajo.
El paso de escape por sí solo. Como un fragmento puede llevar marcado, codificar primero los símbolos de ángulo es el hábito que vale la pena mantener.
Abrir herramienta →Un listado se lee mejor cuando la disposición es estable. Así que reindenta el archivo antes de colorearlo.
Abrir herramienta →Cuando el bloque esté en una página, el script que lo acompaña puede reducirse. Así la descarga que espera el visitante es más pequeña.
Abrir herramienta →Cuando el bloque esté en una página, el marcado que lo rodea puede reducirse. Como el navegador descarga cada comentario, ese es el último paso.
Abrir herramienta →
Colorea el listado y copia el marcado
Elige el lenguaje, pega el código, escoge una paleta y toma el formato de salida que necesites. No se sube nada, y la herramienta escapa el texto antes de colorear, así que el bloque es seguro para una página. Además, casi todos los listados quedan listos en segundos.