Muestra código en las entradas sin que se ejecute

Me he encontrado con un problemilla al mostrar código en las entradas. El caso es que lo formateaba como «code» o «pre», pero la web lo seguía ejecutando, por lo que me mostraba el resultado, no el código.

He probado varios plugins, pero solo maquillaban con CSS el resultado, no impedían que se ejecutara el código. Así que después de investigar un poco decidí insertar una función que detecte todo lo que esté entre «llaves» y lo convierta en una sentencia que no pueda ejecutar WordPress.

Función para que WordPress te muestre el código y no lo ejecute

Esta función detecta automáticamente el código entre {} y lo convierta en «code».

function convertir_codigo_personalizado($content) {
$pattern = '/\{(.*?)\}/';
$replacement = '{$1}';
$content = preg_replace_callback($pattern, function($matches) {
$codeTag = $matches[0];
if (strpos($codeTag, '') === false && strpos($codeTag, '') === false) {
return preg_replace('/\{(.*?)\}/', '{$1}', $codeTag);
} else {
return $codeTag;
}
}, $content);
return $content;
}
add_filter('the_content', 'convertir_codigo_personalizado');
add_filter('widget_text_content', 'convertir_codigo_personalizado');


Cada vez que detecte contenido entre {}, lo envolverá automáticamente en «code», manteniendo las llaves dentro del elemento «/code».

Además, he agregado una excepción. Le he pedido que cada vez que encuentre código en etiquetas «code» no aplique la función en el interior. Así no se generan errores cuando quiero insertar código yo manualmente con la etiqueta «code».

Si te genera algún error, puedes usar el código sin la excepción:

function convertir_codigo_personalizado($content) {
$pattern = '/\{(.*?)\}/';
$replacement = '<code><span>{</span>$1<span>}</span></code>';
$content = preg_replace($pattern, $replacement, $content);
return $content;
}
add_filter('the_content', 'convertir_codigo_personalizado', 11);
add_filter('widget_text_content', 'convertir_codigo_personalizado', 11);

Espero que te resulte útil y no pierdas mucho tiempo navegando.

Bonus CSS para ponerlo bonito

Ya que estamos, vamos a poner bonito el código ¿no?

Vamos a agregar este sencillo CSS en tu Bricks para que aparezca con unos colores que permitan visualizarlo correctamente:

code {
background-color: #f0f1f2;
color: #019b75;
padding: 5px;
border-radius: 4px;
}