Syntax Highlighter — Resaltado de sintaxis en línea

Código fuente

Lenguaje

Vista previa del código

const palette = ['graphite', 'mint'];

function createSnippet(language) {
  return {
    language,
    theme: palette[0],
    accent: palette[1],
  };
}

console.log(createSnippet('javascript'));

{
  "language": "javascript",
  "theme": "github-dark",
  "output": "inline",
  "highlight": [],
  "highlightColor": "#60a5fa",
  "highlightOpacity": 25,
  "focusColor": "#60a5fa",
  "focusOpacity": 25,
  "addColor": "#22c55e",
  "addOpacity": 20,
  "removeColor": "#b91c1c",
  "removeOpacity": 30,
  "lineNumbers": false,
  "lineNumbersStart": 1,
  "lineNumberColor": "#888888",
  "focus": [],
  "add": [],
  "remove": [],
  "collapse": [],
  "diffIndicators": true,
  "diffInGutter": false,
  "autolink": false,
  "summary": "…"
}

Resaltado de sintaxis en línea para compartir código

Prepara ejemplos de código fáciles de leer para documentación, blogs o clases. Pega un fragmento, abre un archivo de texto o carga un ejemplo y elige un tema claro u oscuro. Syntax Highlighter distingue palabras clave, cadenas y comentarios sin cambiar la sangría ni los saltos de línea.

Destaca las líneas importantes, centra la atención en un bloque o marca las líneas añadidas y eliminadas. Ajusta sus colores y opacidad, añade números de línea o pliega una sección larga mientras revisas el resultado. El resaltado y la exportación se realizan en el navegador, sin enviar el código a un servidor para resaltarlo.

Ilustración de código con resaltado de sintaxis y una línea destacada junto a un documento HTML y una imagen del código

Catálogo de lenguajes con búsqueda
Elige entre 242 lenguajes y formatos, incluidos TypeScript, Java, C++, Go, Rust, JSON y YAML. Busca por nombre o alias y carga un ejemplo desde las tarjetas de abajo.
Vistas previas y temas de color en tiempo real
Edita el código y observa cómo se actualiza el resaltado. Busca temas de color o filtra los claros y oscuros para comparar el mismo fragmento sobre distintos fondos.
Exporta HTML o una imagen
Copia el HTML, descarga los archivos con estilos en línea, CSS separado o Tailwind CSS, o guarda el resultado como imagen PNG. La vista previa utiliza la salida seleccionada para que puedas comprobar el aspecto antes de compartirla.

Cómo resaltar código en línea

Pega código o prueba un ejemplo
Introduce el fragmento en el editor. Para explorar otro lenguaje, pulsa su tarjeta para sustituir el contenido por su ejemplo.
Elige el lenguaje correspondiente
Busca por nombre o alias, como JavaScript o js. Cambiar el selector conserva tu texto; elegir la gramática adecuada aplica las reglas de sintaxis correctas.
Compara temas en la vista previa
Elige un tema de color y revisa el resultado mientras editas. El código largo se desplaza dentro de la vista previa sin cambiar su disposición original.

Para leer código a diario

Tutoriales y documentación técnica
Compara la legibilidad de los ejemplos antes de preparar una guía o clase. Prueba temas claros y oscuros con comentarios, cadenas y palabras clave en el mismo fragmento.
Configuración y datos estructurados
Revisa la estructura de JSON, YAML, SQL y scripts de shell con colores de sintaxis. El resaltado ayuda a reconocer patrones, pero no valida datos ni ejecuta comandos.
Aprender un lenguaje desconocido
Explora el ejemplo, los alias y la referencia de un lenguaje, y edita el fragmento para ver su sintaxis coloreada. Cada tarjeta carga el ejemplo en este espacio de trabajo.

Explorar los 242 lenguajes y ejemplos

Preguntas sobre el resaltado de sintaxis

¿Qué es el resaltado de sintaxis?

Asigna colores a elementos del código, como palabras clave, cadenas y comentarios. Ayuda a leer la estructura de un fragmento, pero no demuestra que el código sea correcto.

¿Qué lenguajes se admiten?

El catálogo contiene 242 lenguajes y formatos. Busca en el selector o explora la lista completa. Los alias como js y py identifican lenguajes existentes y no se cuentan como otros lenguajes.

¿Se sube o ejecuta mi código al resaltarlo?

El resaltado funciona en tu navegador y no envía el código a un servidor. La página descarga gramáticas, temas y archivos del motor cuando hacen falta. El código se muestra como texto y no se ejecuta.

¿Es un formateador o un comprobador de sintaxis?

No. La vista previa añade colores conservando el texto, la sangría y los saltos de línea. No formatea, compila, valida ni depura el código. Selecciona manualmente el lenguaje correcto.

¿Puedo copiar o descargar el HTML resaltado?

Sí. Elige estilos en línea, un archivo CSS independiente o Tailwind CSS. Abre los archivos generados para copiarlos por separado o descarga el paquete completo. La vista previa usa el mismo HTML y los mismos estilos.

¿Puedo destacar líneas o importar un archivo?

Sí. Introduce números o intervalos en Líneas destacadas y elige color y opacidad. También puedes cargar archivos UTF-8 no vacíos de hasta 1 MiB, leídos localmente en el navegador.

Explorar ejemplos de código

Explora los 242 lenguajes y formatos admitidos. Pulsa una tarjeta para cargar el ejemplo o visita su referencia para obtener más información.

ABAP

ABAP es el lenguaje de programación propietario de SAP utilizado para desarrollar aplicaciones SAP y personalizar sistemas SAP.

Resaltado de sintaxis en línea para compartir código

Catálogo de lenguajes con búsqueda

Vistas previas y temas de color en tiempo real

Exporta HTML o una imagen

Cómo resaltar código en línea

Pega código o prueba un ejemplo

Elige el lenguaje correspondiente

Compara temas en la vista previa

Para leer código a diario

Tutoriales y documentación técnica

Configuración y datos estructurados

Aprender un lenguaje desconocido

Preguntas sobre el resaltado de sintaxis

Explorar ejemplos de código

ABAP

ActionScript

Ada

AutoHotkey

AutoHotkey2

Angular HTML

Angular TypeScript

Apache Conf

Apex

APL

AppleScript

Ara

AsciiDoc

Assembly

Astro

AWK

Ballerina

Batch File

Beancount

Berry

BibTeX

Bicep

BIRD2 Configuration

Blade

1C (Enterprise)

C

C3

Cadence

Cairo

Chapel

Clarity

Clojure

CMake

COBOL

CODEOWNERS

CodeQL

CoffeeScript

Common Lisp

Rocq

C++

Crystal

C#

CSS

CSV

CUE

Cypher

D

Dart

DAX

Desktop

Diff

Dockerfile

dotEnv

Dream Maker

Edge

Elixir

Elm

Emacs Lisp

ERB

Erlang

Fennel

Fish

Fluent

Fortran (Fixed Form)

Fortran (Free Form)

F#