Saltar al contenido
> 💻 🧠 Código 1001 > 🧪📓 Sin categoría > Resaltado de código en WordPress con Gutenberg y Prism.js

Resaltado de código en WordPress con Gutenberg y Prism.js

  • por

Cuando crea contenido en WordPress, normalmente utiliza el editor Gutenberg.

In Questo Articolo
  1. Gutenberg — un editor de nueva generación
  2. Cómo Gutenberg maneja la cuadrícula
  3. El problema del bloque de código estándar
  4. Qué es Prism.js
  5. Trabajar con un tema hijo
  6. Cómo usar el sitio Prism.js
  7. Conectar Prism.js a WordPress
  8. Numeración automática de líneas
  9. Escapar caracteres HTML
  10. Estilos para los bloques de código
  11. Funciones adicionales de Prism.js
  12. Antes y después de Prism.js

Gutenberg — un editor de nueva generación

En la era de la Web 1.0, los desarrolladores front-end utilizaban el editor TinyMCE. Era un editor de texto WYSIWYG estándar con botones como negrita, cursiva y enlace ubicados sobre un campo <textarea>. Todo el texto se almacenaba como un único flujo de código HTML, y mover un bloque o insertar algo en medio resultaba sumamente incómodo. Además, TinyMCE no admitía el diseño adaptable de 12 columnas que se convirtió en el estándar de facto en la Web 2.0. Los diseños complejos tenían que construirse manualmente con HTML y CSS.

El editor Gutenberg resolvió estos problemas. Apareció en la versión WordPress 5.0 (en diciembre de 2018) y sustituyó al antiguo editor de texto TinyMCE. Ahora, cada parte de la página existe como un bloque independiente: un título, un párrafo, una cita, una imagen, una tabla o un fragmento de código.
Esto hace que la edición sea más sencilla y que las páginas sean más flexibles y adaptables.

El contenido debe mostrarse correctamente en cualquier dispositivo, desde un teléfono móvil hasta un monitor panorámico. Cuando un sitio web no es adaptable, el texto se “desplaza”, las imágenes se recortan y las tablas se salen de los límites del bloque. Esto se soluciona con un diseño adaptable, que se reorganiza automáticamente según el tamaño de la pantalla.

La base de este tipo de diseño es una rejilla de 12 columnas, que se convirtió en estándar gracias a frameworks como Bootstrap y Foundation. El ancho del contenedor se divide en 12 partes iguales (8,33 % cada una), lo que permite construir prácticamente cualquier estructura de página.

Ejemplo:

1 columna  → [████████████] 100 %
2 columnas → [██████][██████] 6/6
3 columnas → [████][████][████] 4/4/4
4 columnas → [███][███][███][███] 3/3/3/3

En los dispositivos móviles, las columnas se colocan automáticamente en vertical,
manteniendo el contenido limpio y legible.

Cómo Gutenberg maneja la cuadrícula

En Gutenberg, la cuadrícula de 12 columnas se implementa mediante el bloque Columnas,
que adapta automáticamente la posición de los elementos según el ancho de la pantalla.
En HTML se representa con los contenedores wp-block-columns y wp-block-column,
y en CSS se usa Flexbox, que controla la alineación y el comportamiento de las columnas.

Ejemplo:

<div class="wp-block-columns">
  <div class="wp-block-column">
    <p>Primera columna</p>
  </div>
  <div class="wp-block-column">
    <p>Segunda columna</p>
  </div>
</div>

CSS:

.wp-block-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
}
.wp-block-column {
  flex-grow: 1;
  flex-basis: 0;
}
@media (max-width: 600px) {
  .wp-block-columns {
    flex-direction: column;
  }
}

Esta estructura hace que Gutenberg sea flexible y garantiza un diseño coherente en todos los dispositivos.

El problema del bloque de código estándar

Entre todos los bloques de Gutenberg, el bloque Código merece atención especial.
Se usa para mostrar ejemplos de programas, scripts o configuraciones.
Técnicamente, es un simple contenedor HTML:

<pre> ... </pre>

Gutenberg y TinyMCE lo muestran igual — como texto en fuente monoespaciada
(normalmente Consolas, Courier New o Monaco)
sin resaltado de sintaxis ni numeración de líneas.

Esto está bien para un uso básico, pero en artículos técnicos o tutoriales,
un bloque de código sin colores se vuelve difícil de leer.
La solución más sencilla es usar Prism.js.

Qué es Prism.js

Prism.js es una biblioteca JavaScript ligera para el resaltado de sintaxis en el navegador.
No necesita módulos de servidor: el script analiza el contenido dentro de <pre><code>...
y la hoja de estilos prism.css colorea palabras clave, cadenas, números y comentarios.

Admite decenas de lenguajes de programación — desde HTML y JavaScript hasta Python y Go —
y ofrece muchos complementos: numeración de líneas, botón de copiar, nombre del lenguaje, temas claro y oscuro, entre otros.

Ejemplo:

<pre><code class="language-js">
function hello(name) {
  return `Hello, ${name}!`;
}

Después de incluir Prism.js, este código se resaltará automáticamente en el navegador.

Trabajar con un tema hijo

Antes de agregar Prism.js, es importante no modificar directamente el tema principal.
Todas las personalizaciones en WordPress deben hacerse en un tema hijo.

Un tema en WordPress controla la apariencia del sitio: plantillas, estilos, menús, encabezados y pies de página.
Si modifica el tema activo, la próxima actualización eliminará sus cambios.

Un tema hijo evita este problema: hereda del tema padre pero conserva sus modificaciones por separado,
protegiendo su código durante las actualizaciones.

Cree una carpeta:

/wp-content/themes/mi-tema-hijo/

Agregue un archivo style.css:

/*
 Theme Name:   Mi Tema Hijo
 Template:     mi-tema
 Version:      1.0
*/

El campo Template debe coincidir con el nombre de la carpeta del tema principal.
Luego cree functions.php:

<?php
add_action('wp_enqueue_scripts', 'child_enqueue_styles');
function child_enqueue_styles() {
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
    wp_enqueue_style('child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('parent-style')
    );
}

Active el tema hijo desde Apariencia → Temas
y realice todas las modificaciones dentro de él.

Cómo usar el sitio Prism.js

Una vez preparado el tema hijo, visite el sitio oficial de Prism.js:
👉 https://prismjs.com

Abra la pestaña Download, donde podrá crear su propia versión de la biblioteca.

Configuración recomendada

  1. Compression level: Minified
  2. Languages: HTML, CSS, JavaScript, PHP, Python, JSON
  3. Plugins:
    • Line Numbers
    • Toolbar
    • Copy to Clipboard Button
    • (opcional) Show Language
    • (opcional) Highlight Lines

Descargue:

  • DOWNLOAD JS → prism.js
  • DOWNLOAD CSS → prism.css

Coloque ambos archivos en la carpeta de su tema hijo:

/wp-content/themes/mi-tema-hijo/

Conectar Prism.js a WordPress

Abra functions.php y añada:

add_action('wp_enqueue_scripts', 'theme_enqueue_prism_assets');
function theme_enqueue_prism_assets() {
    $version = '1.29.0';
    wp_enqueue_style('prism-css',
        get_stylesheet_directory_uri() . '/prism.css', [], $version);
    wp_enqueue_script('prism-js',
        get_stylesheet_directory_uri() . '/prism.js', [], $version, true);
}

Ahora Prism.js resaltará automáticamente todo el código dentro de
<pre><code>....

Numeración automática de líneas

Puede agregar un filtro de WordPress para numerar las líneas automáticamente:

add_filter('render_block_core/code', 'theme_add_prism_line_numbers', 10, 2);
function theme_add_prism_line_numbers($content, $block) {
    return str_replace(
        '<pre class="wp-block-code">',
        '<pre class="wp-block-code line-numbers">',
        $content
    );
}

Escapar caracteres HTML

Si su código contiene los símbolos < o >, el navegador puede interpretarlos como etiquetas HTML.
Para evitarlo, agregue un filtro que los escape automáticamente al guardar la publicación:

add_filter('content_save_pre', 'theme_escape_code_on_save');
function theme_escape_code_on_save($content) {
    return preg_replace_callback(
        '/<code([^>]*)>(.*?)<\/code>/is',
        function ($m) {
            $attrs = $m[1];
            $code  = htmlspecialchars($m[2], ENT_NOQUOTES, 'UTF-8');
            return "<code{$attrs}>{$code}";
        },
        $content
    );
}

Estilos para los bloques de código

Agregue estos estilos en el style.css del tema hijo:

pre[class*="language-"] {
  border-radius: 6px;
  border: 1px solid #ddd;
  padding: 1em;
  background: #f6f8fa;
  font-family: 'Fira Code', Consolas, monospace;
  font-size: 14px;
  line-height: 1.6;
  overflow: auto;
}
pre[class*="language-"].line-numbers {
  padding-left: 3.8em;
}

Funciones adicionales de Prism.js

  • 🔢 Numeración de líneas — añade números como en un IDE.
  • 🧠 Resaltado de líneas — use data-line="2,4-5" para destacar líneas específicas.
  • 📋 Botón Copiar — copia el código con un clic.
  • 💡 Nombre del lenguaje — muestra el lenguaje encima del bloque.
  • 🌗 Tema claro y oscuro — cambia automáticamente:
@media (prefers-color-scheme: dark) {
  body { background: #1e1e1e; color: #d4d4d4; }
}
  • 🎨 Personalización — puede ajustar los colores de los tokens en su style.css:
.token.keyword { color: #d73a49; font-weight: 600; }
.token.string  { color: #032f62; }
.token.comment { color: #6a737d; font-style: italic; }

Antes y después de Prism.js

Antes

<pre><code>
function greet(name) {
  return `Hello, ${name}`;
}

Resultado:

function greet(name) {
  return `Hello, ${name}`;
}

Texto monoespaciado, sin color ni numeración.

Después

<pre class="line-numbers"><code class="language-js">
function greet(name) {
  return `Hello, ${name}`;
}

Resultado:

1 function greet(name) {
2   return `Hello, ${name}`;
3 }

Cada línea tiene un número, el código está coloreado
y aparece un botón Copy para copiar el contenido.

Prism.js hace que los fragmentos de código sean más claros y legibles.
Funciona completamente en el navegador, sin plugins adicionales,
y no afecta el rendimiento.
Una vez configurado, su código se verá limpio, estructurado y profesional.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *