---
title: "Cómo insertar código fuente en WordPress sin romper el formato"
description: "Aprende a insertar código fuente en WordPress con el bloque Código, ejemplos seguros y plugins actuales para resaltar sintaxis, mostrar líneas y copiar snippets."
url: https://wpdirecto.com/como-insertar-codigo-fuente-en-una-entrada-de-wordpress/
date: 2015-08-11
modified: 2026-09-11
author: "MyR"
image: https://wpdirecto.com/wp-content/uploads/2026/09/insertar-codigo-fuente-wordpress.png
categories: ["Guías"]
tags: ["código", "código fuente", "Gutenberg", "programación", "resaltado de sintaxis", "wordpress"]
type: post
lang: es
---

# Cómo insertar código fuente en WordPress sin romper el formato

**La forma más segura de publicar código en WordPress es usar el bloque Código, no pegarlo dentro de un párrafo normal.** Así se conservan los espacios, los saltos de línea y los caracteres especiales sin que el editor intente interpretar el fragmento como HTML.

El artículo original hablaba de WordPress 4 y recomendaba Simple Code Highlighter, un plugin que ya no debe ser la base de una instalación nueva. La situación ha cambiado: el editor de bloques incluye su propio bloque para mostrar código y el directorio oficial ofrece extensiones actuales para añadir resaltado de sintaxis, números de línea o un botón de copia.

## Las claves para insertar código en 20 segundos

- Usa el bloque **Código** para PHP, HTML, CSS, JavaScript, JSON, SQL y otros fragmentos.
- Escapa los caracteres `<`, `>` y `&` cuando escribas código dentro del HTML del post.
- El resaltado de sintaxis es opcional: primero asegúrate de que el fragmento se lee y se copia bien.
- Prueba los snippets en una instalación de desarrollo y advierte siempre si pueden modificar archivos, usuarios o la base de datos.

## El bloque Código de WordPress es la opción de partida

Desde el editor de bloques puedes abrir el insertador con el botón **+**, buscar **Código** y añadirlo en el punto que quieras. También puedes escribir `/code` en una línea nueva. El bloque mantiene el espaciado y los tabuladores del fragmento, algo que un párrafo normal no hace de forma fiable.

La documentación oficial de [Code block de WordPress](https://wordpress.org/documentation/article/code-block/) permite cambiar el color del texto y del fondo, la tipografía, el tamaño, el borde y el espaciado. En la documentación del bloque [`core/code`](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-text/core-block-code/) se define como un bloque estático: el contenido se guarda dentro del post y se muestra como código, no como una instrucción que el navegador deba ejecutar.

Ese último matiz es importante. Si pegas `<script>`, una función PHP o una consulta SQL dentro de un bloque Código, WordPress la enseñará como texto. No se ejecutará por el simple hecho de aparecer en el artículo. Para insertar un ejemplo HTML que el navegador sí deba renderizar necesitas otro bloque y debes valorar con cuidado el riesgo de permitir HTML personalizado.

### Código, Preformateado y HTML personalizado no son lo mismo

- **Código:** está pensado para snippets de programación y respeta saltos de línea, espacios y tabuladores.
- **Preformateado:** conserva el formato de un texto monoespaciado, pero no está tan orientado a explicar lenguajes de programación.
- **HTML personalizado:** permite introducir marcado que el sitio puede interpretar. No es la opción adecuada para enseñar código a los lectores.

## Cómo pegar un snippet sin que WordPress lo rompa

Abre el post, coloca el cursor donde quieras mostrar el ejemplo y añade un bloque Código. Pega el fragmento dentro de ese bloque, no en el editor visual de un párrafo. Guarda el borrador y revisa la vista previa en escritorio y móvil antes de publicar.

Cuando el código procede de una web externa, un editor o un documento con formato enriquecido, puede arrastrar espacios invisibles, comillas curvas o caracteres especiales. Si el ejemplo no se copia bien, pégalo primero en un editor de texto plano y comprueba las sangrías. En fragmentos pequeños merece la pena revisar también que no se hayan convertido las comillas simples en comillas tipográficas.

Si trabajas directamente con el marcado del post, recuerda que los signos menor y mayor deben aparecer escapados dentro de HTML. Este ejemplo representa una etiqueta, no la ejecuta:

`<a href="https://ejemplo.com">Enlace de ejemplo</a>`Lenguaje del código: HTML, XML (xml)

En el bloque Código del editor normalmente puedes pegar `<a>` directamente, porque WordPress se encarga de almacenarlo como contenido del bloque. La necesidad de escapar los signos aparece sobre todo cuando preparas el HTML a mano, generas contenido mediante una API o insertas un ejemplo dentro de otro bloque HTML.

## Ejemplos de código preparados para un tutorial

Un artículo técnico no necesita llenar la pantalla de fragmentos. Es mejor explicar qué hace cada ejemplo, indicar dónde se coloca y añadir una advertencia si modifica la configuración del sitio. Estos son cuatro formatos habituales.

### PHP: un filtro sencillo

Si muestras un filtro de WordPress, indica que debe añadirse en un plugin propio o mediante una herramienta de snippets, y que conviene probarlo antes en staging. No presentes la edición directa de `functions.php` como única opción, porque un cambio con un error de sintaxis puede dejar el tema sin cargar.

`add_filter( 'the_title', function ( $title ) {
if ( is_admin() ) {
return $title;
}

return $title . ' · WordPress';
} );`Lenguaje del código: PHP (php)

El bloque anterior solo muestra el código. Para que tenga efecto hay que colocarlo en el contexto adecuado y comprobar que no entra en conflicto con otros filtros. Cuando publiques snippets, explica también cómo retirarlos.

### HTML y CSS: estructura y presentación

`
Este texto es un ejemplo.
`Lenguaje del código: HTML, XML (xml)

`.aviso-wordpress {
border-left: 4px solid #3858e9;
padding: 1rem;
}`Lenguaje del código: CSS (css)

Separar HTML y CSS ayuda a entender qué parte crea la estructura y cuál cambia su aspecto. Si el lector solo necesita copiar un bloque visual, añade una explicación sobre dónde debe cargar el CSS y evita mezclar estilos en línea sin motivo.

### JavaScript: explica el contexto de ejecución

`document.querySelectorAll('.aviso-wordpress').forEach((aviso) => {
aviso.addEventListener('click', () => {
aviso.classList.toggle('is-open');
});
});`Lenguaje del código: JavaScript (javascript)

Un ejemplo de JavaScript debería aclarar si depende de una librería, si necesita cargarse después del HTML y qué ocurre cuando no existe el selector. No aconsejes insertar scripts sin filtrar en widgets o campos que puedan editar usuarios sin confianza.

### JSON: cuidado con las comillas y la validación

`{
"post_type": "post",
"status": "publish",
"per_page": 10
}`Lenguaje del código: JSON / JSON con comentarios (json)

JSON no admite comentarios y exige comillas dobles para las claves y los valores de texto. Un carácter sobrante basta para que falle la petición. Si el ejemplo forma parte de una llamada a la REST API, incluye el endpoint y los permisos necesarios, pero no publiques tokens, contraseñas ni cookies de sesión.

## Plugins actuales para resaltar la sintaxis

El bloque nativo es suficiente si buscas legibilidad y compatibilidad. Si publicas muchos tutoriales de desarrollo, una extensión puede añadir colores por lenguaje, numeración de líneas, líneas destacadas, títulos de archivo o un botón para copiar el fragmento. Instala una sola y comprueba qué recursos carga en el frontend.

### Syntax-highlighting Code Block

[Syntax-highlighting Code Block](https://wordpress.org/plugins/syntax-highlighting-code-block/) amplía el bloque Código de WordPress y genera el resaltado en el servidor. Su ficha oficial explica que no necesita cargar JavaScript para colorear los snippets, ofrece detección automática del lenguaje, selección manual, líneas destacadas, números de línea y opción para ajustar el salto de línea. Es una alternativa interesante cuando el rendimiento y la ausencia de un destello de código sin colorear pesan más que los controles interactivos.

### WebberZone Code Block Highlighting

[WebberZone Code Block Highlighting](https://wordpress.org/plugins/webberzone-code-block-highlighting/) también trabaja sobre el bloque nativo `core/code`, en lugar de sustituirlo por shortcodes propios. Permite elegir el lenguaje, mostrar números de línea, destacar rangos, añadir una etiqueta de archivo, limitar la altura y activar un botón de copia. Incluye un modo con Prism.js en el navegador y otro con `highlight.php` en el servidor.

[![Editor de bloques de WordPress con el panel de WebberZone Code Block Highlighting para elegir lenguaje y mostrar números de línea](https://wpdirecto.com/wp-content/uploads/2015/08/screenshot-1.png)](https://wordpress.org/plugins/webberzone-code-block-highlighting/)*Captura real de la ficha oficial de WebberZone Code Block Highlighting en WordPress.org.*

[![Bloque de código con resaltado de sintaxis y números de línea en la vista pública de WordPress](https://wpdirecto.com/wp-content/uploads/2015/08/screenshot-2.png)](https://wordpress.org/plugins/webberzone-code-block-highlighting/)*Resultado visual mostrado en la ficha oficial del plugin.*

### Code Block Pro

[Code Block Pro](https://wordpress.org/plugins/code-block-pro/) ofrece un bloque propio basado en el motor de VS Code, temas visuales, resaltado de líneas, desenfoque selectivo y un botón de copia. Puede encajar en una web donde el aspecto del código sea parte importante del diseño, pero conviene revisar que sus funciones de interacción y sus estilos se carguen como esperas. La propia ficha señala que algunas funciones necesitan JavaScript y CSS adicionales, así que no es la opción más contenida para todos los sitios.

## Qué opción elegir según tu caso

| Necesidad | Opción razonable | Qué debes comprobar |
| --- | --- | --- |
| Mostrar snippets sin añadir plugins | Bloque Código nativo | Lectura en móvil, contraste y copia manual. |
| Resaltado con pocos recursos en frontend | Syntax-highlighting Code Block | Lenguaje detectado, estilos del tema y compatibilidad. |
| Lenguajes, números de línea y botón de copia | WebberZone Code Block Highlighting | Modo de renderizado y scripts cargados. |
| Diseño visual más elaborado | Code Block Pro | Dependencia de JavaScript, CSS y configuración por bloque. |

La elección no debería basarse solo en la cantidad de lenguajes. Comprueba la fecha de actualización, la versión mínima de WordPress y PHP, el foro de soporte, la licencia, los recursos que añade y qué queda guardado si desactivas el plugin. Las extensiones que amplían `core/code` suelen dejar el contenido en bloques estándar, algo que facilita volver al bloque nativo.

## Accesibilidad, SEO y experiencia de lectura

Un snippet no está completo porque tenga colores bonitos. Mantén un contraste suficiente, evita que las líneas queden cortadas en móvil y permite que el lector seleccione y copie el contenido. Los números de línea deben ser decorativos, no formar parte del texto que se copia. Si el plugin los mezcla con el código, comprueba el resultado con un teclado y con un lector de pantalla.

Explica cada fragmento con texto normal. Los buscadores y las herramientas de lectura necesitan saber qué problema resuelve, qué requisitos tiene y qué resultado se espera. No conviertas el artículo en una sucesión de bloques de código sin contexto. Un buen título, encabezados descriptivos, ejemplos cortos y enlaces a la documentación oficial ayudan mucho más que repetir palabras clave.

Si el tutorial habla de rendimiento, enlaza con nuestra guía para [mejorar el rendimiento de WordPress](https://wpdirecto.com/consejos-para-mejorar-el-rendimiento-de-wordpress/). Si incluye funciones que afectan a usuarios, roles o archivos, puedes ampliar la parte de protección con nuestros [consejos de seguridad para WordPress](https://wpdirecto.com/10-consejos-para-mejorar-la-seguridad-de-wordpress/). Para aprender a trabajar con bloques personalizados, consulta también la [guía de bloques personalizados](https://wpdirecto.com/como-crear-un-bloque-personalizado-en-wordpress/).

## Seguridad: un snippet no es una receta inocua

Antes de recomendar código, clasifica lo que hace. Un ejemplo que cambia un color no tiene el mismo riesgo que otro que crea usuarios, ejecuta consultas, modifica permisos, procesa archivos subidos o acepta datos de una petición. Esa diferencia debe aparecer en el texto, aunque el fragmento sea corto.

- No publiques claves API, contraseñas, tokens, rutas privadas ni datos reales de usuarios.
- No pruebes código copiado directamente en la web de producción si puede modificar la base de datos.
- Indica la versión de WordPress, PHP o del plugin cuando el comportamiento dependa de ella.
- Incluye una forma de deshacer el cambio y explica qué archivo o ajuste debe restaurarse.
- Revisa el código antes de publicarlo: un tutorial también puede propagar una vulnerabilidad o una mala práctica.

Cuando el snippet se ejecuta mediante un plugin de snippets, usa una cuenta con permisos limitados y conserva una copia de seguridad. Si editas archivos del tema, un tema hijo o un plugin propio, documenta el cambio para que otra persona pueda mantenerlo después. Nuestra [guía de temas hijo](https://wpdirecto.com/child-theme-instalar-wordpress/) explica por qué no conviene modificar directamente el tema padre.

## Problemas habituales y cómo resolverlos

- **Los caracteres desaparecen:** el fragmento se pegó en un párrafo o el HTML se sanitizó. Trasládalo a un bloque Código y revisa la vista de código.
- **El código aparece en una sola línea:** comprueba que usas el bloque Código y que el tema no está aplicando un estilo de `white-space` incorrecto.
- **El resaltado no coincide:** selecciona el lenguaje manualmente en el panel del bloque. La detección automática puede confundirse con fragmentos muy cortos.
- **El móvil corta las líneas:** activa el desplazamiento horizontal o el ajuste de línea, pero prueba ambos porque los comandos largos pueden perder legibilidad.
- **El bloque queda inválido:** no mezcles comentarios de bloque, HTML manual y shortcodes sin comprobar la estructura. Guarda una revisión antes de corregirlo.

## Flujo recomendado para publicar código

1. Define el objetivo del snippet en una frase.
2. Comprueba que el código funciona con la versión de WordPress y PHP que indicas.
3. Elimina datos reales y prepara una versión mínima que se pueda entender.
4. Añade el bloque Código y selecciona el lenguaje si utilizas un resaltador.
5. Explica dónde se pega, qué permisos necesita y cómo se revierte.
6. Prueba la lectura, la copia y el desplazamiento horizontal en móvil.
7. Revisa los enlaces oficiales y la fecha de actualización de cualquier plugin recomendado.

## Conclusión

Para la mayoría de artículos basta con el bloque Código que trae WordPress. Respeta el formato, mantiene el snippet separado del texto y no ejecuta las instrucciones que contiene. Si publicas tutoriales de forma habitual, Syntax-highlighting Code Block, WebberZone Code Block Highlighting y Code Block Pro ofrecen caminos distintos para añadir colores, números de línea o copia rápida.

El plugin antiguo del artículo original queda como referencia histórica. Hoy importa más conservar un bloque estándar, explicar el contexto y probar el código con seguridad que llenar cada ejemplo de efectos. Una publicación técnica útil deja claro qué hace el fragmento, dónde se utiliza y qué puede salir mal.

*Fuentes: [documentación oficial del bloque Código](https://wordpress.org/documentation/article/code-block/), [referencia del bloque `core/code`](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-text/core-block-code/), fichas oficiales de [Syntax-highlighting Code Block](https://wordpress.org/plugins/syntax-highlighting-code-block/), [WebberZone Code Block Highlighting](https://wordpress.org/plugins/webberzone-code-block-highlighting/) y [Code Block Pro](https://wordpress.org/plugins/code-block-pro/).*