Pre-Code (Wordpress... y-porqué no-Blogger)

Para empezar, Firefox se carga, habitualmente, los "pre", a la hora de intentar mostrar un código a los usuarios del blog, pero... a parte de existir soluciones, podemos hacerlo de una forma "guapa", aprovechando el CSS (aunque hay métodos para soslayar este "bug" en muchas librerías... pero vamos a lo más cómodo ahora mismo).
Echad un ojo a la página original y a mi prueba



Y ahora vamos con lo único que hay que hacer:

.- CSS: A modificar al gusto

<style type="text/css">



pre.ylw {

background: url(http://.../Pre009.png) repeat-y left top;

border: none;

}

pre.blk {

background: url(http://.../Pre009.png) repeat-y left top;

border: none;

color: #fff;

}

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://.../pre9.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;

}

.code h6 {

margin: 0;

font-size: 1.5em;

padding: 5px 10px 5px 25px;

background: url(icon_code.gif) no-repeat 5px 6px;

}

</style>

.- HTML:

<div class="code">

<h6>CSS</h6>

<pre><code>pre {

font-size: 12px;

padding: 0;

margin: 20px;

background: #f0f0f0;

border-left: 1px solid #ccc;

line-height: 20px;

background: url(pre_code_bg.gif) repeat-y left top;

width: 600px;

overflow: auto;

overflow-Y:hidden;

}

</code></pre>



</div>

Y ya está...