jueves, 19 de noviembre de 2009

Cómo resaltar la sintaxis en tu blog

Este tutorial contará cómo resolví el primer desafío que se me presentó al intentar escribir otro sobre la configuración más básica del framework Spring para Java.
El problema radicaba en que, si quería mostrar fragmentos de código fuente con ejemplos de lo que hacía paso a paso, debía encargarme de los estilos para resaltarlo de acuerdo al lenguaje de que se trate (teniendo en cuenta las keywords y sintaxis).
La herramienta que encontré para resolverlo es SyntaxHighlighter.
Para utilizarlo no hay más que incluir sus Javascripts al final del documento, siendo que éstos deben incluir el shCore.js y un brush por cada lenguaje soportado, que se trata de un script que analiza el contenido del código fuente y lo pinta según las reglas del lenguaje que represente, como muestro en el siguiente ejemplo:
<link href="http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css" rel="stylesheet" type="text/css"></link>
<script language="javascript" src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js">
</script>
<!-- aquí incluyo los brushes de Java y XML -->
<script language="javascript" src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js"></script>
<script language="javascript" src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js"></script>

<script language="javascript">
dp.SyntaxHighlighter.ClipboardSwf = '/flash/clipboard.swf';
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>
Para agregarlo al final del documento, debe ingresar a la configuración de diseño del blog y, de allí, seleccionar la solapa "Edición de HTML".
Una vez configurado el blog, cada vez que se quiera resaltar la sintaxis de algún fragmento de texto. debe escribírselo de la siguiente manera:
<pre name="code" class="idLenguaje">
   ...
</pre>
Donde "idLenguaje" es cualquiera de los soportados, como: cpp, csharp, css, java, xml, html, php, python, sql, etc.
Aunque debe tenerse en cuenta que, en algunos casos, el código fuente a mostrar contiene algunos símbolos que luego causarán problemas (el syntaxHighlighter, por ejemplo, falla con los '>' en los tag <pre>). Ello no debería ser un obstáculo ya que podemos "escapear" cada caracter problemático. Sin embargo, esta tarea es demasiado engorrosa y propensa a errores; pero, afortunadamente, existen sitios como este que lo hacen automáticamente.

No hay comentarios:

Publicar un comentario en la entrada