Google Code Prettify automático con jQuery

Google Code prettify es un módulo que hace uso de Javascript y CSS para resaltar la sintáxis de código fuente en una página HTML, muy usando en blogs donde se explican códigos fuentes en diversos lenguajes (C, Basic, Javascript, Ruby, PHP, MySQL etc).

El inconveniente que particularmente he encontrado es colocar prettyprint en el atributo class de las etiquetas </pre> ó </code>. Al menos en mi caso es tedioso pues no tengo un editor tipo WordPress que acepta plugin de terceros para facilitarme la vida al momento de editar. Así que encontre una solución con jQuery.

Descargamos Google Code Prettify (bastará con el archivo JavaScript y CSS). En la cabecerá de la página colocamos lo siguiente:

// agregar la hoja de estilos
<link type="text/css" rel="stylesheet" href="prettify/prettify.css" />

<script type="text/javascript">
$(document).ready(function() {

 // agrega clase prettyprint a todos los bloques <pre> (tambien podemos agregar <code>)
 var prettify = false;
 $("pre").each(function() {
 $(this).addClass('prettyprint');
 prettify = true;
 });

 // si se encontro bloques de código se llama la función prettyPrint
 if ( prettify ) {
 $.getScript("prettify/prettify.js", function() { prettyPrint() });
 }
});
</script>

El código busca la etiqueta </pre> en el HTML, si lo encuentra agrega: la clase prettyprint que resaltará la sintáxis de los códigos, llama al archivo prettify.js y a la función prettyPrint().

Esto es útil también pues si una página no contiene la etiqueta</pre> ó </code> no se llamará al archivo prettify.js, ahorrandonos en ancho de banda.