Si cuentas con un blog de programación, casi seguro que tienes que mostrar códigos bien formateados para que tus visitantes se enteren mejor de los ejemplos. Puede parecer fácil, pero por desgracia, a veces puede llegar a ser bastante complicado. En este artículo te muestro unos cuantos consejos y trucos sobre cómo mostrar código en WordPress de manera correcta. Coge papel y boli, y…¡vamos allá!
Codificar el código
HTML, por ejemplo, cuenta con caracteres especiales, como los símbolos < y >, que pueden producir efectos extraños en tu WordPress: bloques de texto que no aparecen, formatos que ya no responden, ver cosas que antes no aparecían… En definitiva, pueden romper el diseño de tu sitio web.
Todo esto puede arreglarse «escapando» de dichos caracteres. Este proceso implica escanear el texto buscando dichos caracteres, para después reemplazarlos por códigos que los navegadores pueden interpretar como el símbolo correcto.
Dependiendo de qué tipo de código desees mostrar en la parte pública de tu web, es posible que tengas que codificar dicho código (válgame la redundancia) para que no sea un problema para WordPress. Básicamente, los caracteres que suelen dar problemas a la hora de mostrar código en WordPress son los anteriormente mencionados, < y >, ya que se utilizan para abrir y cerrar tags HTML.
Existen muchos plugins que se encargan de codificar tu código, e incluso WordPress ya lo hace de forma automática, pero yo soy de la vieja escuela y prefiero asegurarme de que todo va a ir bien modificando el código manualmente. En el caso de que se cuele un <div> que publiquemos en el código fuente de nuestro artículo, por ejemplo, puede ocasionar que el diseño de nuestro tema no se muestre correctamente, ya que el navegador lo interpretará como un elemento HTML válido.
Para codificar nuestro código de forma manual existen herramientas para ayudarnos con el proceso. Lo único que hacen dichas herramientas es convertir los caracteres especiales de HTML, en códigos interpretables por el navegador que se mostrarán fidedignamente cuando accedas a la parte pública de tu proyecto. Si tuviese que recomendar una de estas herramientas, sin duda me quedaría con HTML Encoder.
Mostrar código en WordPress
Basicamente hay dos maneras de mostrar código en WordPress. La primera es ideal para mostrar fragmentos cortos de código, como una etiqueta HTML o el nombre de una función de PHP. Para estos caso, lo mejor es utilizar la etiqueta <code> tal y como te mostramos a continuación:
Esto es un texto, y a continuación metemos un poco de PHP <code><?php echo "Hola Mundo"; ?></code>
La segunda es mejor para bloques de código, como sueles ver habitualmente en esta santa casa. Para dichos casos, debes insertar tu código entre los tags <pre> y </pre> tal que así:
Esto es un bloque de texto dentro de un bloque <pre> y </pre>
Si quieres más información sobre qué tags utilizar para según qué códigos quieras mostrar, puedes echar un vistazo al artículo en el que WordPress Codex habla de ello.
Dando estilo a los tag <pre>
Para asegurarnos de que el código se muestre bonito cuando lo insertamos dentro de los tags <pre> y </pre>, debes considerar unas cuantas cosas antes:
- Utiliza siempre una fuente monoespaciada. Las fuentes para la web que mejor se llevan con los principales navegadores son la Consolas, Monaco y la archifamosa Courier.
- Evita los saltos de línea, ya que si los introduces todo el rato, tu código no será legible. Para ello, introduce la regla white-space:pre en el estilo de los <pre>
- Haz que en tu <pre> se pueda hacer scroll de manera horizontal utilizando la regla overflow-x:auto
Aquí, por ejemplo, tienes el código CSS que nosotros utilizamos para mostrar los códigos.
article pre{
background:#f5f5f5;
border:1px #eee solid;
color: #777;
border-top:20px #00759d solid;
font-family:Consolas, courier;
font-size:0.9em;
white-space:pre;
overflow-x:auto;
}Plugins para mostrar código
Si en tu blog sueles mostrar un montón de fragmentos de código, tal vez debas considerar el instalar un plugin. La principal ventaja de los plugins para mostrar código en WordPress es que son capaces de colorear la sintaxis del lenguaje de programación, haciéndola así más legible para los visitantes.
Dicho esto, he probado muchos plugins de este tipo, y no sé porqué, al final siempre acabo utilizando el método manual, ya que muchas veces este tipo de complementos ralentizan la web o son muy exigentes en cuanto a recursos. Pero de todas maneras, eso no quita que haya buenos plugins para mostrar código en WordPress, como:
Y hasta aquí nuestro artículo sobre cómo mostrar código en WordPress correctamente. Espero que te haya gustado y, si te ha resultado útil, no dudes en compartirlo en redes sociales. El icono de la imagen destacada es obra de Numero Uno. ¡Nos leemos!
