Código PHP para Resaltar Código en WordPress

Si eres desarrollador web o simplemente gestionas un blog de tecnología, ciberseguridad, o cualquier otro nicho relacionado con programación, es probable que quieras mostrar fragmentos de código en tus publicaciones. WordPress, por defecto, no tiene un sistema de resaltado de sintaxis para mostrar código. Sin embargo, con un pequeño fragmento de código PHP y algo de CSS, puedes hacer que el código fuente de tus publicaciones se vea más profesional y fácil de leer.

En esta entrada, te mostraremos cómo resaltar código en WordPress utilizando PHP. Al final, podrás integrar un resaltado de sintaxis simple y efectivo para tus publicaciones y páginas.

¿Por qué resaltar el código?

El resaltado de sintaxis es una técnica que mejora la legibilidad del código, permitiendo a los desarrolladores identificar fácilmente los diferentes componentes, como las palabras clave, cadenas, números y comentarios. Además, este tipo de resaltado es útil no solo para programadores, sino también para cualquier persona que quiera entender el código que se muestra en una publicación.

Paso 1: Crear un plugin o agregar el código en functions.php

Primero, necesitamos crear una función en PHP que se encargue de resaltar el código que esté dentro de las etiquetas <code> de las publicaciones.

Si tienes acceso al archivo functions.php de tu tema o prefieres crear un pequeño plugin, puedes añadir este código:

Código PHP para Resaltar Código:

<code>function custom_code_highlighter($content) {
    // Procesar solo los bloques <pre><code>
    $content = preg_replace_callback(
        '/<pre class="wp-block-code"><code>(.*?)<\/code><\/pre>/is',
        function ($matches) {
            $code = $matches[1]; // Obtener el código

            // Palabras clave de ejemplo (puedes personalizar según el lenguaje)
            $keywords = ['const', 'let', 'var', 'function', 'return', 'if', 'else', 'for', 'while', 'switch', 'case', 'break', 'default'];
            $code = preg_replace('/\b(' . implode('|', $keywords) . ')\b/', '<span class="keyword">$1</span>', $code);

            // Cadenas de texto
            $code = preg_replace('/(["\'])(.*?)(["\'])/', '<span class="string">$1$2$3</span>', $code);

            // Números
            $code = preg_replace('/\b(\d+)\b/', '<span class="number">$1</span>', $code);

            // Comentarios (estilo JS y C-like)
            $code = preg_replace('/(\/\/.*?$|\/\*.*?\*\/)/ms', '<span class="comment">$1</span>', $code);

            // Funciones (ejemplo básico: nombres seguidos de paréntesis)
            $code = preg_replace('/\b([a-zA-Z_][a-zA-Z0-9_]*)\s*(?=\()/m', '<span class="function">$1</span>', $code);

            // Envolver en el bloque <pre><code>
            return '<pre class="wp-block-code"><code>' . htmlspecialchars($code) . '</code></pre>';
        },
        $content
    );

    return $content;
}

// Añadir el filtro al contenido
add_filter('the_content', 'custom_code_highlighter');

Este código PHP busca los bloques de código en las publicaciones de WordPress, los procesa y resalta las partes del código como palabras clave, cadenas de texto, números, comentarios y funciones.

Paso 2: Estilos CSS para Resaltar Código

Para que el resaltado de sintaxis se vea correctamente, debes agregar algo de CSS para los diferentes tipos de código que vamos a resaltar. Aquí te dejo un ejemplo:

Código CSS:

<code>.keyword { color: blue; font-weight: bold; }
.string { color: green; }
.number { color: red; }
.comment { color: gray; font-style: italic; }
.function { color: purple; }

Puedes agregar este CSS en el archivo style.css de tu tema o dentro de los Ajustes de personalización de WordPress, en la sección de CSS adicional.

¿Qué hace cada clase?

• .keyword: Resalta las palabras clave como const, let, var, etc.
• .string: Resalta las cadenas de texto dentro de comillas.
• .number: Resalta los números presentes en el código.
• .comment: Da formato a los comentarios en el código, como los que utilizan // o /* */.
• .function: Resalta las funciones del código.

Paso 3: Usar el código en tus publicaciones

Ahora, puedes usar el bloque de código resaltado en cualquier publicación de WordPress. Para ello, simplemente agrega un bloque de código en el editor de WordPress utilizando las etiquetas <pre><code>:

<code><pre class="wp-block-code"><code>
function greet() {
    var message = "Hello, world!";
    console.log(message);
}
</code></pre>

El código dentro de estas etiquetas será procesado por el filtro que hemos creado y resaltado de acuerdo a las reglas que definimos en PHP y CSS.

Ventajas de usar este método

1. Personalización: Puedes modificar las expresiones regulares para resaltar diferentes elementos del código según el lenguaje que estés utilizando.
2. Simplicidad: Es una solución sencilla que no requiere la instalación de plugins adicionales.
3. Compatibilidad: Funciona con cualquier tema de WordPress, siempre que puedas editar los archivos functions.php o añadir un pequeño plugin.

Conclusión

Resaltar código en WordPress no tiene por qué ser complicado. Con un pequeño código PHP y algo de CSS, puedes mejorar la legibilidad de los fragmentos de código en tus publicaciones. Esto no solo hace que tu contenido se vea más profesional, sino que también ayuda a que tus lectores comprendan mejor el código que compartes.