ES

Resaltado de sintaxis

Con este resaltado de sintaxis coloreas código fuente sin instalar nada: pega tu código, elige el lenguaje y un esquema claro u oscuro y copia el HTML resultante. Los colores van dentro del propio código, así que se ve bien en blogs, correos y documentos sin una hoja de estilos adicional.

Fuente: WCAG 2.2 – Success Criterion 1.4.3 Contrast (Minimum): 4,5:1 para el texto (colores de ambos temas comprobados). Actualizado: .

Pega código fuente. El resaltado de la vista previa se actualiza al escribir.

Tu texto se queda en tu navegador: no se envía, no se guarda y no aparece en la dirección de la página.

Vista previa

// Mostrar un saludo
function greet(name) {
  const text = "Hola, " + name + "!";
  console.log(text);
  return text.length;
}

greet("mundo");
Mi caja de herramientas

Resultado

HTML coloreado
<pre style="background:#ffffff;color:#1f2328;padding:12px 14px;border-radius:6px;overflow:auto;font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;tab-size:4;margin:0"><code style="font:inherit"><span style="color:#57606a;font-style:italic">// Mostrar un saludo</span> <span style="color:#cf222e">function</span> <span style="color:#8250df">greet</span>(name) { <span style="color:#cf222e">const</span> text = <span style="color:#0a3069">"Hola, "</span> + name + <span style="color:#0a3069">"!"</span>; console.<span style="color:#8250df">log</span>(text); <span style="color:#cf222e">return</span> text.length; } <span style="color:#8250df">greet</span>(<span style="color:#0a3069">"mundo"</span>);</code></pre>
Detectado
JavaScript / TypeScript, 8 líneas, 143 caracteres
El HTML lleva los colores como atributos style y se puede pegar donde se admita HTML. La detección es una aproximación basada en patrones, no un analizador completo; con sintaxis poco habitual puede quedar algún fragmento sin color. El código se procesa solo en tu navegador, no se guarda ni se envía.

Cómo se calcula

El resaltado de sintaxis colorea los componentes del código fuente: palabras clave, cadenas, números, comentarios y nombres de funciones reciben cada uno su color. Así el código se lee mejor, sobre todo en textos, documentación y correos, donde no hay un editor con esquema de colores.

Qué puede hacer el resaltador

Seguro y sin pérdidas

El código fuente no se modifica: solo se divide en secciones y se rodea de indicaciones de color. Caracteres como < y & se escapan para que el código con fragmentos HTML no afecte al resto de la página. Para ordenar el código antes, usa el formateador JSON, el formateador SQL o el formateador HTML.

Preguntas frecuentes

¿Cómo coloreo código para una entrada de blog?

Pega el código, elige lenguaje y esquema de color y copia el HTML del campo de resultado. Insértalo en el editor del blog como bloque HTML. Los colores van en el código, no hace falta una hoja de estilos adicional.

¿Puedo pegar el código coloreado en Word o en un correo?

Sí, normalmente desde la vista previa: selecciona, copia y pega, y los colores se mantienen. En programas que no aceptan HTML sirve una captura de la vista previa.

¿Qué lenguajes admite?

JavaScript y TypeScript, JSON, HTML con script y estilo incrustados, CSS, SQL, Python y Bash. Para cualquier otro lenguaje elige «Texto plano»; entonces solo queda el formato del bloque.

¿Mi código se guarda o se envía?

No. El procesamiento ocurre en tu navegador. El código no aparece en la dirección y no se guarda.

¿Por qué algunas partes no se colorean?

El resaltador reconoce patrones como palabras clave, cadenas y comentarios, pero no es un analizador completo. Una sintaxis poco habitual o una variante del lenguaje a veces se queda en negro.

Fuentes y base legal

Última actualización: · Principios editoriales

Herramientas relacionadas