Caja contenedora para mostrar texto o código

Algunos nos vemos en la necesidad de mostrar código HTML en nuestro blog, buscamos la forma más sencilla mostrándolo directamente, si es muy extenso intentamos acortarlo con un botón para expandir y contraer, con scroll o también con un efecto elegante de mostrar y ocultar.
Debe haber mil formas de hacerlo, y cualquiera de ellas es buena siempre que la entrada no se haga interminable cosa que a veces me ha ocurrido
En BLOGGER ACCESORIES nos muestran una original caja contenedora o mejor dicho la posibilidad de resaltar una parte de nuestra entrada.
El autor Mohamed Rias muestra algunos códigos y textos de esta forma:

Sin alargarme más vamos a hacer un ejemplo, nos situamos en plantilla edición de HTML , justo antes de ]]></b:skin> añadimos lo siguiente:

.codeview {
margin : 15px 35px 15px 15px;
padding : 10px;

background : #f9f9f9 url(http://i263.photobucket.com/albums/ii150/mohamedrias/cv-1.gif) no-repeat right bottom;

border-top : 1px solid #eeeeee;

border-right : 2px solid #cccccc;

border-bottom : 2px solid #cccccc;

border-left : 1px solid #eeeeee;

}
.codeview li {
font-size : 13px;
line-height : 24px;
font-family : "Courier New", "MS Sans Serif", sans-serif, serif;
color : #333333;
font-weight : normal;
margin : 0;
padding : 0;
}

Una vez añadido guardamos los cambios y nos dirigimos al editor de entradas, allí añadimos:

<div class="codeview">

Aquí añadimos el contenido de la caja.

</div>

Y guardamos los cambios.

¿La personalizamos?

En background : #f9f9f9 tenemos la posibilidad de variar el color de fondo.
La imagen que aporta el autor la sustituimos en:
url(http://i263.photobucket.com/albums/ii150/mohamedrias/cv-1.gif)
Hay que aclarar que la imagen está añadida a un fondo blanco de forma rectangular, la imagen que deseamos añadir debe ser más o menos así:

130 x 91

Con padding : 10px; bajamos o subimos la imagen que nosotros añadimos.
Una referencia para los bordes:
border-top : 1px solid #eeeeee; (borde superior)
border-right : 2px solid #cccccc; (borde derecho)
border-bottom : 2px solid #cccccc; (borde izquierdo)
border-left : 1px solid #eeeeee; (borde inferior)

Y eso es todo ya pueden empezar cuando gusten.