Código elegante

Una herramienta recomendable para todo aquél que planee mostrar código en una bitácora es dp.SyntaxHighlighter. Éste es el modo de incorporarlo en Blogger:

  1. Descarga la última versión disponible de dp.SyntaxHighlighter (1.4.1).
  2. Descomprime el paquete en algún lugar de tu disco duro. Hay algunos ejemplos de uso, y dos directorios importantes: Scripts y Styles. Necesitas alojar en algún lugar accesible la hoja de estilos CSS SyntaxHighlighter.css, el script shCore.js y tantos “brushes” como planees utilizar. Cada brush es un pequeño script adicional que proporciona soporte para un lenguaje de programación. Los lenguajes soportados son C++, C#, CSS, Delphi, Java, Javascript, PHP, Python, Ruby, SQL, Visual Basic y XML (HTML, XHTML… se consideran dialectos).
  3. Edita tu plantilla de Blogger (¡haz copias de seguridad primero!) En primer lugar, añade la referencia a la hoja de estilos dentro del la cabecera de la página (por ejemplo, justo antes de </head>). Así:
  4. Edita el cuerpo de la plantilla para poner el código que sigue antes de </body>.He escogido ese conjunto de brushes, pero puedes poner cualquier otro.
  5. Ya hemos terminado con la infraestructura. Ahora, sólo es necesario incorporar código para mostrar el nuevo juguetito de nuestra bitácora. Eso es muy fácil: basta con añadir el código dentro de una marca <textarea>, con los siguientes atributos:El atributo name cualifica al área de texto para ser modificada dinámicamente por el script dp.SyntaxHighlighter. class determina el lenguaje y ciertos modificadores de comportamiento, expresados como pseudoclases de CSS. Estos son los detalles adicionales.

Algún consejo: es interesante aplicar los atributos rows y cols al elemento <textarea>. Esto es así por robustez: si no llegaran a funcionar los scripts (normalmente debido a un fallo transitorio de red, a que el usuario tiene desactivada la ejecución de Javascript o a que se está leyendo el artículo fuera del contexto de un navegador —por ejemplo, a través de un lector RSS) el código se vería de todos modos.

Y para el final, los problemas.

  • Los saltos de línea son un problema con el editor de Blogger. La única solución que he encontrado pasa por desactivar la conversión automática de saltos de línea en elementos <br/>. Mira aquí.
  • Si estás introduciendo XML o cualquier variante (HTML, por ejemplo), es recomendable proteger el primer caracter de las marcas (el signo <), que debería aparecer, literalmente, como &lt;. Esto no afectará a la presentación del código, ni a la ventana de “vista simple” proporcionada por el script.