Highlight.js en Blogger. Colores en el código

Highlight.js nos permite colorear el código que listamos en nuestras entradas, según el tipo de lenguaje.

De esta manera comprendemos más fácilmente los listados de código que instalaremos después en las plantillas ayudándonos en su modificación si fuera necesario.

Demo.

Los pasos son sencillos:

1. Bajamos el fichero zip que contiene los ficheros necesarios (default.css y highlight.pack.js). En la carpeta styles hay otros ficheros css que modifican el estilo, sería bueno hacer pruebas con cada uno de ellos para ver cuál es el que mejor se adapta a nuestro blog. Nos permite bajar también el lenguaje, en Blogger sería suficiente con css, xml y javascript en la mayoria de los casos.

2. Alojamos los ficheros default.css y highlight.pack.js en nuestro alojamiento habitual (últimamente hay problemas con skydrive).

3. Despues de </head>  pegamos este código:

<link href='TU_URL/default.css' rel='stylesheet' type='text/css'/>
<script src='TU_URL/highlight.pack.js' type='text/javascript'/>
<script type='text/javascript'>hljs.initHighlightingOnLoad();</script>

TU_URL es la dirección del alojamiento.

Guardamos la plantilla.

4. En la entrada donde vamos a poner el listado del código pondremos:

<pre><code class="LENGUAJE">

AQUI EL CÓDIGO

</code></pre>

cambiaremos LENGUAJE por css, html o javascript dependiendo del tipo de código a listar.