Cómo integrar el editor Gutenberg con el resaltado de sintaxis de Prism en WordPress

El bloque por defecto «Código» en Gutenberg no soporta el resaltado de sintaxis. La biblioteca Prism.js resuelve este problema. Esta guía describe cómo configurar Prism.js, incluyendo una solución automática para los problemas de visualización con los caracteres HTML < y >.

El problema: Conflicto con las etiquetas HTML

Un navegador interpreta los caracteres < y > dentro de los bloques de código como etiquetas HTML, lo que rompe el diseño de la página.

La solución: Escapado de caracteres

Para una visualización correcta, los caracteres especiales deben ser reemplazados por entidades HTML:

• < se reemplaza por <
• > se reemplaza por >

Este proceso se automatiza usando un filtro de WordPress para evitar el reemplazo manual y los problemas con el editor Gutenberg.

Configuración paso a paso

Paso 0: Preparar un tema hijo

Todos los cambios deben hacerse en un tema hijo (child theme) para asegurar que no se borren cuando el tema padre se actualice.

---

Paso 1: Descargar y configurar una compilación de Prism.js

1. Ve al sitio web: prismjs.com/download.html.
2. Selecciona los componentes:
   • Nivel de compresión (Compression level): Minified.
   • Lenguajes (Languages): Markup, CSS, C-like, JavaScript. Añade cualquier otro lenguaje que necesites.
   • Plugins: Line Numbers, Toolbar, Copy to Clipboard Button.
3. Descarga los archivos: Haz clic en DOWNLOAD JS y DOWNLOAD CSS.

Coloca los archivos prism.js y prism.css descargados en la carpeta raíz de tu tema hijo.

---

Paso 2: Enlazar los archivos en functions.php

Para enlazar los archivos en WordPress, abre el archivo functions.php de tu tema hijo y añade el siguiente código:

<?php

/**
 * Enlaza los estilos y scripts para el resaltado de código.
 */
add_action('wp_enqueue_scripts', 'theme_enqueue_prism_assets');
function theme_enqueue_prism_assets() {
    // Enlazar los estilos de Prism
    wp_enqueue_style(
        'prism-css',
        get_stylesheet_directory_uri() . '/prism.css',
        array(),
        '1.29.0' // Versión para el control de la caché
    );

    // Enlazar el script de Prism
    wp_enqueue_script(
        'prism-js',
        get_stylesheet_directory_uri() . '/prism.js',
        array(),
        '1.29.0',
        true // Cargar en el pie de página
    );
}

/**
 * Añade clases automáticamente a los bloques de código de Gutenberg.
 */
add_filter('render_block_core/code', 'theme_add_prism_classes_to_code_block', 10, 2);
function theme_add_prism_classes_to_code_block($block_content, $block) {
    // Añadir la clase line-numbers a la etiqueta <pre>
    $block_content = str_replace('<pre class="wp-block-code">', '<pre class="wp-block-code line-numbers">', $block_content);
    return $block_content;
}

Este código enlaza los archivos y activa la numeración de líneas.

---

Paso 3: Escapar caracteres automáticamente

El paso clave es añadir un filtro en functions.php para escapar automáticamente los caracteres especiales antes de guardar la entrada.

/**
 * Escapa los caracteres HTML dentro de las etiquetas <code> cuando se guarda una entrada.
 */
add_filter('content_save_pre', 'theme_escape_code_on_save');
function theme_escape_code_on_save($content) {
    // Encontrar todos los bloques <code>...
    return preg_replace_callback('/(.*?)<\/code>/is', function($matches) {
        $attributes = $matches[1]; // Atributos de la etiqueta
        $code_content = $matches[2]; // Contenido de la etiqueta

        // Escapar el contenido
        $escaped_content = htmlspecialchars($code_content, ENT_NOQUOTES, 'UTF-8');

        // Reconstruir la etiqueta
        return '<code' . $attributes . '>' . $escaped_content . '';
    }, $content);
}

El «hook» content_save_pre se activa antes de escribir en la base de datos. La función htmlspecialchars convierte los caracteres especiales en entidades HTML seguras.

---

Paso 4: Estilos en style.css

Para una presentación limpia, añade los siguientes estilos al archivo style.css de tu tema hijo:

/* Estilos para los bloques de código */
pre[class*="language-"] {
    border-radius: 5px;
    border: 1px solid #ddd;
    font-size: 14px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* Estilos para la barra de herramientas de Prism */
div.code-toolbar {
    position: relative;
}

div.code-toolbar > .toolbar {
    position: absolute;
    top: 10px;
    right: 10px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

div.code-toolbar:hover > .toolbar {
    opacity: 1; /* Mostrar el botón al pasar el cursor */
}

.toolbar-item button {
    padding: 5px 10px;
    background: #f5f5f5;
    color: #333;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 13px;
    cursor: pointer;
}

.toolbar-item button:hover {
    background-color: #e0e0e0;
}

Resultado

Después de completar estos pasos, cada bloque de código en Gutenberg tendrá:

• Resaltado de sintaxis automático.
• Números de línea.
• Un botón para copiar.
• Renderización correcta de etiquetas HTML sin romper el diseño.