por

Todos aquellos que tenéis un blog de programación funcionando bajo WordPress os topáis con este problema: cómo mostrar código en mi blog (y hacerlo de la forma más adecuada).

Hablo de blogs de programación, pero es extensible a otros blogs técnicos, donde también necesitemos insertar código en los artículos, como puede ser un blog de Linux, por ejemplo.

En la actualidad existen multitud de plugins desarrollados para resolver específicamente este problema, mostrar código en un post de WordPress, pero nosotros vamos a ver cómo hacerlo sin tener que utilizar ningun plugin de terceros, y además de una forma muy sencilla.

Para mostrar código en WordPress es suficiente con el uso de las etiquetas <pre> y <code>.

La etiqueta <pre> nos permite mostrar texto preformateado, de tal forma que todo el texto que insertemos entre las etiquetas <pre> y </pre> se mostrará en el post o artículo tal cual lo pongamos, respectando los espacios, saltos de línea, etc.

La etiqueta <code> es la utilizada nativamente por el editor de WordPress para mostrar código. El código que insertemos entre <code> y </code> quedará resaltado y diferenciado del resto del texto del artículo o post.

La diferencia entre <pre> y <code> es que el primero (pre) muestra el código como un bloque, respetando los espacios y tabulaciones, mientras que el segundo (code) lo muestra como líneas individuales y no respeta los espacios internos. Yo recomiendo el uso de <pre> para mostrar código fuente de varias líneas y <code> para resaltar comandos, instrucciones, etc., sobre el propio texto del artículo.

A continuación podéis ver un ejemplo de código con uno y otro.

Codigo fuente insertado con <pre> :

if (x>0) {
   y = 45;
else
   y = 90;

Codigo fuente insertado con <code> :

if (x>0) {
y = 45;
else
y = 90;

Aquí estáis viendo el resultado según los estilos de esta propia página web, pero tened en cuenta que la forma de mostrar este código viene definida por los estilos CSS que le demos a <pre> y <code> en el código CSS de nuestra web. Para adecuarlo al estilo que queramos, podemos utilizar un child theme que modifique el CSS y así <pre> y <code> se muestren según el estilo que más nos convenga.