viernes, 20 de abril de 2012

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.



3 comentarios:

  1. Wahhh muchas gracias :D Hace poco abrí un blog en el que pondré cosas que me pasan que aveces soluciono pero luego se me olvida como lo hice :P entonces de paso comparto la experiencia y queda la forma de recordar como hice las cosas :)

    esto lo usare muchísimo.

    Por cierto, no sería mejor importar el .css de la misma forma que se importan los .js ???

    aunque copie y pegue y así funciono, pero como que algo hice mal por que ya no sale el fondo :P lo intentare nuevamente importando el css a ver que tal.

    Gracias.

    ResponderEliminar
    Respuestas
    1. Hola, de igual forma esté es un blog donde registro las cosas especialmente para mi consulta futura, igual olvido siempre como lo hice y es un excelente idea porque siempre tengo donde documentarme de la mejor fuente...

      Eliminar
  2. Humm, como que la idea de importarlo no sirve :/ pero bueno, finalmente copie todo encima de "/b:skin" y ya no me daño el fondo :)

    Muchas gracias.

    Mañana haré un post sobre esto y obvio dejare un link a esta página, para que los demás sepan, y para recordar de donde saque esto :P Ademas esta en Español :)

    ResponderEliminar

Desea contactar con nosotros, deje un comentario y pronto le daremos respuesta.