Resaltador de sintaxis (SyntaxHighlighter) en Blogger

Desde hace algunos meses encontré en un blog una forma especial de destacar el código de lenguaje de programación, permitiendo una mayor claridad en las explicaciones.  Lo busque para implementarlo en mi blog.  Pero esta tarea no resulto fácil, tras varios intentos fallidos por fin encontré como hacerlo, lo documento a continuación para ayuda de quién lo requiera.  

Esto además de resaltar, y mostrar el código de una forma clara.
Permite al visitante tomar el código directamente o imprimirlo
con los botones dispuestos en la parte superior 

Para poder seguir en detalles los pasos en esta entrada debes conocer como editar el código en tu plantilla de blogger, si no sabes revisa esta entrada y luego regresa.

Desde el editor de código de la plantilla de Blogger vamos a agregar las siguientes líneas.

1vamos a Estilo para SyntaxHighlighter (CSS) seleccionamos todo y lo copiamos, volvemos al editor html de nuestro blog y adicionamos este código en la sección de CSS de la plantilla, despues de <b:skin><!--[CDATA[    y antes de  ]]--></b:skin> (Para encontrarlo de forma rápida de CRTL + F y buscamos <b:skin> )

2Buscamos la etiqueta </head> y antes de esta copiamos las siguientes líneas, lo que permiten es agregar los archivos js, necesarios para el funcionamiento del SyntaxHighlighter. Se pueden eliminar las líneas de lenguajes que no utilizamos 

Elimina las líneas de lenguajes que no utilices shBrushVb.js es para Visual Basic, si no lo requieres elimina:

3

Volvemos al editor HTML de nuestro blog, buscamos la etiqueta </body> y antes de está etiqueta adicionamos las siguiente línea de código: 

<!--  Syntaxhighlighting -->
<script language='javascript'>
      dp.SyntaxHighlighter.BloggerMode();
      dp.SyntaxHighlighter.HighlightAll('code');
</script>

Con esto finalizamos los ajustes en el editor HTML, damos vista previa a la plantilla y si todo ha ido bien Guardamos.

4Ahora lo que queda es adicionar el siguiente código en cada entrada donde queremos mostrar código en nuestro blog.

    ...Escriba su código aquí...

En la etiqueta se indica el lenguaje que se va a interpreta,  class="lenguaje interpretado", según se incluyeron los archivos js en el código anterior (c, c++, c#, c-sharp, csharp, css, delphi, pascal, java, js, jscript, javascript, php, py, python, rb, ruby, rails, ror, sql, vb, vb.net, xml, html, xhtml, xslt).

Diseño y desarrollo de sitios web para empresas, basados en tecnología Joomla, WordPress, tienda en línea con OpenCart.

 www.creandoweb.co