Utilizando etiqueta <pre> para publicar códigos

A la hora de realizar mi primer post con código ejemplo me encontre un problema que era de esperarse, el navegardor (En mi caso Mozilla Firefox) tomaba el código que yo escribia, como parte de la pagina (lo interpretaba), y no se mostraba en la entrada del blog publicada. Entonces empezo mi busqueda para solucionar el problema.

Luego de horas de investigación logre sacar un formato para la publicación de cogios sin que el navegador los interprete, que fuera fácil de usar, que el texto no perdiera el formato, se mantuviera la identación, etc. Mediante la utilización de HTML Entities a la hora de colocar caractéres especiales propios de HTML, para prevenir la perdida de identación descubi que la etiqueta <pre> de HTML matiene la identacion, y con la utilizacion de estilos CSS le di el formato deseado al texto y al bloque de codigo, con scrollbars, width, height, etc.

Para mostrarles el ejemplo de mi formato ejemplo para publicar codigos nada mejor que mostrarles el propio codigo del formato.



Codigo

<pre style="
background-color: #E8F2FF;
border-bottom: 2px solid #AAA;
border-top: 2px solid #AAA;
font-family: 'Courier New', Courier, Fixed;
overflow-y: scroll;
width: 600px;
height: 200px;">

 El codigo ejemplo aqui

</pre>