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:
- Descarga la última versión disponible de dp.SyntaxHighlighter (1.4.1).
- 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).
- 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í:
- 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.
- 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 <. Esto no afectará a la presentación del código, ni a la ventana de “vista simple” proporcionada por el script.