Mostrando entradas con la etiqueta postear. Mostrar todas las entradas
Mostrando entradas con la etiqueta postear. Mostrar todas las entradas

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;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgNms2kqLdOb97fJSXSQgZJnTh9yPQswsYx_1VVy8lqRhUfnvQ7-Qgs1ptK3b08rVI_OWWk6MMtf8uVA_pFMcEAyuVVGGNlfbspNooeOIIEpgs3BFp-mSqwSPEKMLlj4Peuyh6Q1HubGs/&quot; /&gt;</code></pre></div>