Snippets en Blogger a todo color!!!

Muchas veces he visto en las paginas de los foros como a la hora de mostrar algún fragmento de código (snippets) se muestran con una fuente especial, con sintaxis remarcada, etc., tal cual se ve en un editor tipo VIM o Kate, pues bueno, después de un tiempo con eso en mente para agregarlo a mi Blogger traté hacerlo por medio del elemento HTML <div> con su respectiva hoja de estilo añadida a la plantilla de mi Blogger pero no funciono como yo quería, afortunadamente encontré que podía usar la etiqueta <pre> que sirve exactamente a mis propósitos, es posible modificar este elemento por medio de hojas de estilo para que quede a nuestro gusto.

VIM:
Para que VIM nos exporte un mejor codigo HTML y que nos sea mas fácil usarlo agregamos lo siguiente al archivo ~/.vimrc:

.vimrc

map <F11> :let &background = ( &background == "dark"? "light" : "dark" )<CR>

syntax on
" Conversion HTML (:help 2html.vim)
let g:html_use_css = 1
let g:html_use_encoding = "utf8"
let g:use_xhtml = 1

Para darle formato a un código oprimimos varias veces la tecla ESC, después escribimos gg=GG, esto indentará nuestro código. Si queremos reemplazar los tabuladores por espacios oprimimos varias veces ESC, luego escribimos :set expandtab y damos ENTER, seguido de :retab, y listo. Para exportar esto a HTML volvemos a dar ESC varias veces y escribimos :runtime syntax/2html.vim para utilizar este plugin, bastará con guardad el archivo HTML mostrado y extraer de él la sección de la hoja de estilo y todo lo contenido dentro de las etiquetas <pre>, este código lo insertaremos en editor de Blogger junto con la hoja de estilo.

Kate:
Kate hasta donde veo no usa hojas de estilo al exportar en HTML, por eso los atributos de color se agregarán dentro de las etiqueta <span> provocando un poco mas de desorden, aunque de esta forma no tenemos que estar agregando la seccion <style> al Blogger.

Con Kate para reemplazar todos los tabuladores por espacio (8 en mi configuración) daremos clic en Tools->Clean Indentation (Herramientas->Borrar Sangrado) y Tools->Align (Herramientas->Alinear), despues damos clic en File->Exporta as HTML... (Archivo->Exportar como HTML...) después bastará con copiar la parte del código HTML dentro de las etiquetas <pre></pre> y pegarlo en el blog.


Fuentes:
[1]
[2]

...