Poner código fuente en colores en un blog

Gracias a un comentario en el artículo sobre como cargar más datos en un ListView al llegar al final, de la serie de programación Android, he descubierto como añadir colores y formato al código fuente en un artículo de blog. Doy las gracias a Juan Manuel Boehme por su aportación.

La verdad es que es bastante sencillo. Yo pensaba que sería bastante más complicado, pero no. El artículo Poner código fuente en colores en un blog lo explica perfectamente. Se puede encontrar más información en Publicar código fuente en Blogger.

El "truco" está en utlizar la librería JavaScript SyntaxHighlighter de Alex Gorbatchev. Dicha librería es un resaltador de código fuente en páginas HTML que funciona con múltiples lenguajes: PHP, Java, C++, Javascript, SQL, XML, HTML, etc.

Para usarlo en Blogger hay que incluir los archivos de la librería en la cabecera HTML del blog (). Para ello hay que entrar en Blogger -> Acceder al blog -> Plantilla -> Edición de HTML -> Continuar.

<link rel='stylesheet' type='text/css'
href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' />

<link rel='stylesheet' type='text/css'
href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' />

<script type='text/javascript'
src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' />

<script type='text/javascript'
src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' />

<script type='text/javascript'
src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' />

<script type='text/javascript'
src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' />

<script type='text/javascript'
src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' />

<script type='text/javascript'
src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' />

<script type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>

En este ejemplo he añadido los archivos necesarios para colorear la sintaxis en PHP, Java, XML/HTML, CSS y SQL, pero se pueden incluir muchos más como C, C#, C++, Delphi o Ruby, entre muchos otros.

Luego para usarlo en el artículo basta escribir lo siguiente:

<pre class="brush: lenguaje">
 Aquí va el código fuente
</pre>

...sustituyendo lenguaje por el identificador del lenguaje de programación con que se coloreará la sintaxis: php, xml, css, sql, c, cpp, js, ...

Una cosa más a tener en cuenta es que en el código fuenta hay que sustituir los caracteres menor (<) y mayor (>) por sus correspondientes entidades HTML: &lt; y &gt;. Si no se hace así, la librería puede fallar.