miércoles, 24 de agosto de 2011

Usar coloreado de sintaxis en Blogger

Desde hace unos días vengo usando en este blog el coloreado de sintaxis según el lenguaje (desconozco el nombre técnico en español). Para esto empleo una librería javascript que encontré en SyntaxisHighlighter. Como Blogger no permite (hasta donde sé) subir archivos de javascript al blog, debo enlazar la librería desde el sitio del autor, lo cual de hecho es mejor ya que, aparte de tener siempre la versión más actualizada, se guarda en él caché del navegador, así si el usuario accede a otro sitio que utiliza el mismo script, el navegador no tiene que volver a cargarlo.

Este es el código que estoy usando en mi plantilla, lo tengo justo antes del cierre de la etiqueta </head>:

<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/shBrushCSharp.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/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script type='text/javascript'> 
  SyntaxHighlighter.config.bloggerMode = true;
  SyntaxHighlighter.all();
</script>

Las dos primeras líneas cargan los archivos de estilos. Luego se carga el archivo javascript principal que es el mismo para todos los lenguajes. A continuación se enlazan los scripts según los lenguajes que se quieran usar. En mi caso son (en orden) C#, PHP, Python, Bash y XML. La lista completa está aquí.

Terminamos creando un bloque script donde llamamos la función SyntaxHighlighter.all(); que activa el coloreado. Como uso Blogger también activo el SyntaxHighlighter.config.bloggerMode.

Cuando necesito mostrar un código con coloreado de sintaxis, escribo lo siguiente:

<pre class="brush: [lenguaje]">
Aquí el código
</pre>

Obviamente se reemplaza [lenguaje] por el lenguaje del código a mostrar. Recordemos que para usar el coloreado de sintaxis de un lenguaje debo enlazar su correspondiente script. También se debe tener presente usar &lt; y &gt; en vez de < y > respectivamente, dentro del código que se quiera mostrar.

Edit: parece que el término "coloreado de sintaxis" es correcto, o al menos así está en la Wikipedia.

No hay comentarios:

Publicar un comentario

Si deseas extender esta entrada, por favor hazlo