Blogger: Como mostrar fragmentos de código correctamente

El editor WYSYWG de Blogger está muy limitado y no tiene la posibilidad de incluir fragmentos de código de una forma cómoda y que luego estos se vean de forma correcta.

Para esto hay cientos de soluciones, pero las que más me han gustado han sido las siguientes:

1. Usar una página web para generar el código que luego incluiremos en la edición HTML de nuestra entrada del blog.
   Un par de sitios interesantes para esto son:
   http://quickhighlighter.com/
   http://www.simplebits.com/cgi-bin/simplecode.pl
   
   
2. Usar un script como SyntaxHighlighter
   
   
3. O modificar la plantilla añadiendo un estilo para esto. Como por ejemplo el que se explica en este otro blog (chanflee.com) y que básicamente requiere modificar la plantilla que usamos añadiendo justo antes de:  ]]></b:skin> lo siguiente:
   .code {color: #006AB0; border : 1px solid #DADADA;padding : 5px 5px;font-family : Consolas, "Courier New", Courier, mono, serif;font-size : 12px;background-color : #fAfAfA; width : 90%;overflow : auto;margin : 10px 0 10px 10px; border-left : 20px solid #DADADA;max-height : 500px;min-height : 16px;line-height : 16px;}
   .code:hover {background-color : #f3f3f3;}
   y que luego podremos llamar cada vez que lo requiramos según lo siguiente:
   <div class="code"><br />TEXTO O CODIGO AQUI<br /></div>