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.

3 comentarios:

Neysi

Hola Intereseante el articulo. Una pregunta , soporta lenguaje PHP

jesgo

Neysi, por supuesto soporta PHP.

Gilberto Ramos

Gracias!! voy a utilizarlo en mi blog!

» Escribe tu comentario aquí:


Si quieres hacer alguna consulta sobre tu blog habilita tu perfil o deja un enlace a tu blog:
<a href="url-de-la-página">Texto enlace</a>

» O utiliza el antiguo formulario


Los comentarios están siendo moderados y publicados lo antes posible.



jesgo23 ©2008/2009 | Plantilla Blogger | Diseño jesgo Creative Commons License