Syntax Highlighter para Blogger

Categoría: Desarrollo de Software, Tips | June 30, 2009

ss12

En Blogger no existe la manera de hacer que el código colocado en un post tenga la diferenciación de colores según lo que significa cada caracter (Syntax Highlighting), es por eso que existen librerías Javascript que nos ayudan con el problema, una de ellas (la más conocida) es Syntax Highlighter. Actualmente está en su versión 2.0.320

Ahora si actualmente usas Syntax Highlighter con Blogger seguramente te diste cuenta que Google Pages está cerrando y Google Sites no deja subir archivos JS ni HTML por temas de seguridad. ¿Qué tiene que ver Syntax Highlighter con Google Pages? … Mucho, la mayoría de las soluciones para poder implementar Syntax Highligher tenían que ver con el servicio de Google Pages y la facilidad de subir los archivos JS y CSS.

Pero gracias a Alex Gorbatchev podemos utilizar estas librerías sin tener un servicio de hosting.En la URL http://alexgorbatchev.com/pub/sh/ están tanto las versiones antiguas como las nuevas de Syntax Highlighter. En este caso elegimos la carpeta current (actual) http://alexgorbatchev.com/pub/sh/current/.

Vamos a la edición de Layout de Blogger y editamos el código HTML

ss2
Empezamos a modificar el código HTML de nuestro template en Blogger. Si antes teníamos algo parecido a esto (ver imagen) lo borramos:

Y lo reemplazamos (o insertamos) el siguiente código:


<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>

Si queremos agregamos los “brushes” que queramos. Los brushes(brochas) en este caso se refiere a que tipo de coloración se le dará al código (puede ser código Javascript, XML, PHP, etc.), puedes ver más acá.

Para ejecutarlo basta colocar en algún lado(Yo lo tengo en un widget de código HTML/Javascript en el Sidebar, pero puedes colocarlo en cualquier lugar) lo siguiente:


<script type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>

Acá están más opciones de configuración.
El código que se deberá colocar en el post de Blogger tendrás que hacerlo en el tag pre y colocando en la clase brush:{tipo_de_codigo}, por ejemplo:


<pre class="brush:js">
alert("Prueba");
</pre>

Si ya utilizabas Syntax Highlighter en su versión 1.5.x existe una explicación para hacer el upgrade (La versión actual es la 2.0.320).

Comentarios

  1. No me funciona no se porque me deja muchos espaciados :/ como que hace muchos saltos de linea

    Horacio — September 23, 2012 @ 1:32 am

Deja un comentario