Resalta el código fuente de tu web con Google Code Prettify

¿cuántas veces hemos recurrido a internet para consultar lenguajes de programación tan conocidos como html e insertar fragmentos de código en los blogs, foros o cualquier página web?
La manera más fácil y rápida de entender el código fuente es resaltar su sintáxis con diferentes colores.
En la red podemos encontrar multitud de servicios online para resaltar bloques de código fuente. Algunos de los más conocidos son:

• http://markup.su/highlighter
• http://pastie.org
• http://pygments.org
• http://prettyprinter.de

Otras páginas nos ofrecen la posibilidad de descargar archivos (ficheros javascript y css) para instalar en nuestra web:

• SyntaxHighlighter
• Snippet (plugin jQuery)
• highlight.js
• SHJS (Syntax Highlighting in JavaScript)
• Lighter (GitHub)
• CodePress
• WordPress Rainbow Hilite (plugin para Wordpress)
• Syntax Highlight (plugin para Wordpress)
• WP-Syntax highlighted (plugin para Wordpress)

De todas las opciones disponibles he decidido usar Google Code Prettify por dos razones de peso:

• No necesito instalar ninguna librería
• Es muy fácil de usar: para integrarlo en mi blog, voy a escribir muy pocas líneas de código (a continuación os mostraré varios ejemplos).

Las características fundamentales de este resaltador de códigos son:

• No bloquea la carga de la página mientras se ejecuta
• Detecta automáticamente los bloques de código y el lenguaje de programación usado
• Reconoce los lenguajes tipo C, Java, Python, Bash, SQL, HTML, XML, CSS, Javascript, Ruby, PHP, VB, y Awk
• Es compatible con la mayoría de los navegadores web

La forma de proceder es la siguiente:

• Escribimos la línea
  <script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?autoload=true&skin=default" defer="defer"></script>
  dónde skin es la hoja de estilos que vamos a cargar.

  skin = default
  skin = sons-of-obsidian
  skin = sunburst
  skin = desert
  skin = doxy
  

• A continuación escribimos la etiqueta <pre class="prettyprint">
• Introducimos el código que vamos a colorear dentro del tag pre.
  Importante: hay que reemplazar todos los < por < y los > por > para que el navegador entienda que es texto plano.
• Por último, cerramos la etiqueta </pre>

Ejemplo con 'default':
Ejemplo con 'sons-of-obsidian':
Ejemplo con 'sunburst':
Ejemplo con 'desert':
Ejemplo con 'doxy':
Además podemos numerar las líneas de código para cada uno de los estilos mencionados.
Para ello, tenemos que añadir la clase linemus al tag pre de la siguiente manera:

<pre class="prettyprint linenums">

Ejemplo con 'default' y 'linemus':