Resaltar código en blogger de forma fácil con SyntaxHighlighter

SyntaxHighlighter es un proyecto OpenSource realizado en Javascript para ayudar a los desarrolladores (o cualquier otra persona) que deseen mostrar su código fuente con color y formato según el lenguaje de programación que estén compartiendo.

Dicho proyecto es mantenido a la fecha por Alex Gorbatchev y puede ser seguido en github. Cualquier donación para apoyar este proyecto se puede hacer en este enlace.

En su versión actual (3.0.83) tiene soporte para presentar código resaltado para 30 lenguajes, así mismo tiene distintos temas para personalizar la presentación.

Existen dos formas para integrar SyntaxHighlighter, una es descargando los ficheros javascript y subirlos a su respectiva carpeta en un servidor web (esto sirve también para probarlo de forma local) y la otra es de forma online, haciendo referencias a dichos ficheros alojados en el sitio web de este proyecto.

Debido a que blogger y otras plataformas gratuitas de blogging no permiten subir ficheros, presentaré como se integra en la plataforma de este blog. La integración para otras plataformas de blogging se puede consultar aquí.

Lo primero es entrar al "Escritorio" o el panel principal de blogger

Segundo, hacer clic en "Plantilla" y luego vamos a editar la plantilla en HTML haciendo clic en "Editar HTML"

Tercero, buscar la etiqueta de cierre </head> ya que allí colocaremos la llamada a las librerías de SyntaxHiaghlighter

Cuarto, justo arriba de la etiqueta de cierre HEAD colocar la llamada a las librerías y los enlaces de los lenguajes que desearíamos dar formato en nuestro blog, luego hacer clic en "Guardar plantilla". La lista de los lenguajes (brushes) soportados la podemos encontrar haciendo clic aquí

Las librerías principales que deben ir indicadas son estas:

Abajo de: <!-- Add brushes here --> deben ir colocados los enlaces a los brushes del tipo de lenguaje que tengamos pensado algún día compartir una porción de código.

Quinto, ir a crear una nueva entrada en el blog y empezar a escribir la parte del post que no lleva formato y como sugerencia personal se pueden colocar un par de saltos de línea para dar un espacio donde irá el código formateado que deseamos compartir

Sexto, en la parte superior izquierda se encuentra el botón HTML que es el que nos permite escribir nuestro post en html. Hacer clic en él y pasaremos a este modo de edición

Séptimo, el código que deseamos compartir debe ir colocado entre las etiquetas <pre> y </pre>. Al tratarse de llamadas a un tipo específico de clases CSS que hemos incrustado en la plantilla, en la etiqueta PRE de apertura definimos la llamada a la clase "brush" luego se colocan dos puntos " : " y definimos el nombre del lenguaje que queremos dar formato (habiéndolo también incluido dentro de la plantilla de nuestro blog). En mi caso, utilicé un código de ejemplo en el lenguaje Python, por lo que la etiqueta PRE, la llamada a la Clase y dicho código queda de esa manera

Octavo, luego de haber colocado el código entre las etiquetas <pre> y </pre> se puede colocar un salto de línea de html (etiqueta <br />), se presiona el botón "Redactar" para cambiar a la forma de redacción normal y continuar escribiendo el post

 

Noveno, una vez terminado el post pasamos a dar clic en "publicar" y tendrá una apariencia como esta

Para el ejemplo he utilizado el tema (Theme) predeterminado, también cabe mencionar que el post y su código se verán de esta forma hasta que se haya publicado la entrada, si hacemos clic en "Vista previa" no se presentará el código con su respectivo formato.

Lo bueno de este proyecto es que la forma en como queremos mostrar el código es muy personalizable. La lista de Themes soportada hasta la fecha se encuentra haciendo clic aquí

En la página del proyecto se muestra un ejemplo cómo se podría cambiar de Theme si las librerías se encuentran de forma local o en servidor web, pero si se quiere cambiar dentro de blogger tenemos que hacerlo en esta línea que fue copiada dentro de la plantilla (tal como se hizo en el cuarto paso):

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>

Al copiar el código de las librerías el tema predeterminado es shThemeDefault.css pero actualmente tenemos las siguientes opciones:

1. shThemeDjango.css
2. shThemeEclipse.css
3. shThemeEmacs.css
4. shThemeFadeToGrey.css
5. shThemeMidnight.css
6. shThemeRDark.css

Espero que a alguien mas le pueda ser de utilidad. Y para futuras mejoras siempre revisar la página del proyecto.

Bytes.