viernes, 13 de febrero de 2009

Cómo usar SyntaxHighlighter 2.0 en Blogger

SyntaxHighlighter: es una librería completa para resaltar código (syntax highlight) desarrollada en JavaScript que permite dar una aspecto visual mucho más agradable a un fragmento de código incrustado en un sitio web, blog, wiki, etc.

Este proyecto iniciado en 2004 a ganado ya mucha aceptación y recientemente, a inicios de este mes (Feb. 2009) a lanzado su nueva versión: SyntaxHighlighter 2.0. De acuerdo al sitio oficial del proyecto la versión 2.0 representa una renovación casi completa (código reescrito, limpieza, optimización, estandarización y nuevas características).

Existe un post (en ingles) sobre como usar dicha librería javascript en blogger, aunque este post data de Agosto de 2007 es una buena referencia, aquellos que lo deseen lo pueden revisar en el siguiente enlace: http://developertips.blogspot.com/2007/08/syntaxhighlighter-on-blogger.html

A continuación los pasos necesarios:
1. Descargamos SyntaxHighlighter aquí y buscamos un buen servidor donde guardar los archivos incluidos en la librería.
2. Ingresamos en BLOGGER, y editamos nuestra plantilla: "Personalizar > Diseño > Edición de HTML", yo de paso aproveché para dar una nueva imagen a mi blog. :-)
Modificamos el header de la plantilla como sigue:
<!--syntaxHishlighter begin-->
<link href="http://[HOST_SITE]/shCore.css" rel="stylesheet" type="text/css">
<link href="http://[HOST_SITE]/shThemeDefault.css" rel="stylesheet" type="text/css">
<script src="http://[HOST_SITE]/shCore.js" type="text/javascript">
<script src="http://[HOST_SITE]/shBrushCpp.js" type="text/javascript">
<script src="http://[HOST_SITE]/shBrushCSharp.js" type="text/javascript">
<script src="http://[HOST_SITE]/shBrushCss.js" type="text/javascript">
<script src="http://[HOST_SITE]/shBrushJava.js" type="text/javascript">
<script src="http://[HOST_SITE]/shBrushJScript.js" type="text/javascript">
<script src="http://[HOST_SITE]/shBrushSql.js" type="text/javascript">
<script src="http://[HOST_SITE]/shBrushXml.js" type="text/javascript">
<script type="text/javascript">
SyntaxHighlighter.config.bloggerMode=true;
SyntaxHighlighter.config.ClipboardSwf = "http://[HOST_SITE]/clipboard.swf"; SyntaxHighlighter.all();
</script>
<!--syntaxHishlighter end-->
Aquí es importante resaltar que la configuración SyntaxHighlighter.config.bloggerMode es necesario para que todo funcione correctamente en Blogger.

3. Ahora cada fragmento de código que deseemos resaltar lo colocamos dentro un tag <pre>, por ejemplo:
<pre class="brush: js; html-script: true;  auto-links: false">
alert("hola mundo!");
</pre>
Con esta está ya todo listo.

Saludos.

Actualización: Google Page Creator será reemplazado por Google Site y ya no es una buena opción para guardar los archivos necesarios para usar el SyntaxHighlighter.

Actualización 02/01/2011: Al parecer la opción light:true hacía que no se cargaran los controles para copiar el código de ejemplo por lo que la quité :).