sábado, 20 de marzo de 2010

Postear código fuente


Para postear código fuente en blogger únicamente hay que escapar las entidades del código que puedan interpretarse como html:
& la escapamos como &
< la escapamos como &lt;
> la escapamos como &gt;
" la escapamos como &quot;


En Escape de entidades html tenemos una utilidad que nos hará la transformación de forma automática.

Y opcionalmente se puede adornar el resultado con CSS:

/* --INI display CODE-- */
pre {
font-size: 12px;
padding: 0;
margin: 0;
background: #f0f0f0;
border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc;
line-height: 20px;
background: url(http://lh5.ggpht.com/NRgsYoIH-Ug/bloc.png) repeat-y left top;
/* width: 600px; */
overflow: auto;
overflow-Y:hidden;
}
pre code {
margin: 0 0 0 40px;
padding: 18px 0;
display: block;
}
.code {
margin: 20px 0;
}

/* --FIN display CODE-- */

Y en el post el código convenientemente escapado entre las siguientes etiquetas html en azul:
<div class="code"><pre><code>&lt;img class=&quot;img-BTB&quot; WIDTH: 230px; FLOAT: left; HEIGHT: 175px;  src=&quot;http://lh6.ggpht.com/_5SvLLd6obBo/S6oge4yg7_I/AAAAAAAAC0s/QADpkklic10/recuadro-fotos.png&quot; /&gt;</code></pre></div>