Mostrar código fuente en Blogger


Hace algunos posts, explicábamos cómo formatear el código fuente de una entrada usando
SyntaxHighlighter. Puedes leerla aquí. El resultado es muy bonito, pero el rendimiento es bastante pobre.

Otra forma para conseguir código con formato para tu blog, es usar google-code-prettify. Se instala muy fácilmente siguiendo esto pasos:


  • Entra en tu blog 
  • Ve a Diseño->Edición HTML
  • Busca el cierre del head, </head> y justo arriba pegas el siguiente código
  • <script src="
    https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js">
    </script>
  • También puedes descargarte el módulo completo desde aquí y usar esto:
    <link href="prettify.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="prettify.js"></script>
    
  • Guarda los cambios

Así, cuando escribas una entrada nueva, en la edición HTML, debes encerrar tu código con estos tags:

<pre class="prettyprint">
  mi código aquí
</pre>


Puedes ir comprobando el resultado con la Vista previa del blog. El resultado es:

mi código aquí