Usando Prettify de GoogleCode en Blogger

Google-code-prettify es un módulo de Javascript y archivo CSS que nos permite el resaltado de sintaxis de fragmentos de código fuente en una página HTML. Esto nos puede ser útil si usamos nuestro Blog para difundir diferentes tipos de códigos fuente y queremos mostrarlos con un estilo diferente al que por defecto muestre nuestra plantilla. Existen otras formas y librerías para este propósito pero la configuración y uso de esta me ha parecido bastante sencillo de explicar y realizar.

Añadir Prettify a nuestro blog

En primer lugar entraremos en el panel de Administración de nuestro blog en Blogger y buscaremos la opción de Plantilla donde elegiremos Editar HTML buscando a continuación la etiqueta </head> y copiando el siguiente código justo encima de esta

<link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>
<script type="text/javascript" language="javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/lang-css.js"></script>

A continuación buscaremos el inicio del <body> de nuestra plantilla y a continuación copiaremos el siguiente código

<script type='text/javascript'>
window.addEventListener('load', function (event) { prettyPrint() }, false);
</script>

O si no este

<script type='text/javascript'>
document.addEventListener('DOMContentLoaded',function() {
    prettyPrint();
});
</script>

Uso de Prettify

Con esto ya podríamos mostrar texto formateado usando en la edición HTML de la siguiente forma

<code class="prettyprint lang-lenguaje">>
<!-- código que deseas mostrar -->
</code>

<pre class="prettyprint lang-lenguaje">
<!--  código que deseas mostrar -->
</pre>

Donde lenguaje serian las siglas del lenguaje de programación que deseemos mostrar.

Que fuimos, somos y seremos nada