Picacodigos

Syntax Highlighter son un conjunto de librerías en Javascript desarrolladas por Alex Gorbatchev, gratuitas y disponibles en Google Code. Gracias a ellas, podemos escribir bloques de código fuente en blogs o páginas Web con un formato realmente elegante, y con sintaxis preparada para C#, VB, Delphi, C++, Java, JScript, Python, Ruby, PHP y unos cuantos lenguajes más. Se instala y se configura en pocos minutos y es sencilla de usar. En concreto, vamos a ver cómo podemos usarla en un blog que utilice dasBlog como motor.

Configuración Inicial

Si te descargas el código de Syntax Highlighter, verás que tiene una serie de ficheros JavaScript comprimidos y sin comprimir, más un fichero Flash y un fichero de CSS. Subimos los scripts que vayamos a usar (o todos, que nunca se sabe), junto con el fichero Flash, a la carpeta que deseemos de nuestra estructura de directorios, pero recordando la ruta. Lo mismo para el fichero de estilos CSS. En mi caso he subido los scripts a la carpeta /scripts y el CSS a la ruta donde se aloja el tema de la página, /themes/dandelion/.
Después tenemos que preparar nuestro blog para que admita bloques de texto y los prepare como código fuente. Para ello modificaremos el fichero homeTemplate.blogtemplate, que es el fichero que utiliza dasBlog como maestro, y que contiene las distintas partes de nuestro blog: capas para dividir menús de entradas, cabeceras, etc. En el homeTemplate.blogtemplate, antes de la etiqueta </head>, incluimos el siguiente código:

<!-- Syntax Highlighter by Alex Gorbatchev -->
<link type="text/css" rel="stylesheet" href="themes/dandelion/SyntaxHighlighter.css"></link>
<script type="text/javascript" language="javascript" src="scripts/shCore.js"></script>
<script type="text/javascript" language="javascript" src="scripts/shBrushCSharp.js"></script>
<script type="text/javascript" language="javascript" src="scripts/shBrushXml.js"></script>
<script type="text/javascript" language="javascript">
window.onload = function () {
    dp.SyntaxHighlighter.ClipboardSwf = 'Scripts/clipboard.swf';
    dp.SyntaxHighlighter.HighlightAll('code');
}
</script>

Y ya está, ya tenemos preparado nuestro dasBlog para usar Syntax Highlighter.

Modo de empleo

Hay dos maneras principalmente de usar Syntax Highlighter. Mediante las etiquetas <pre> y <textarea>.
Mediante la etiqueta <pre> el uso es como sigue:

<pre name="code" class="codigoLenguaje">
...
Y aquí vendría el código, teniendo en cuenta que
codigoLenguaje hay que sustituirlo por el alias 
del lenguaje que estemos usando
...
</pre>

También puede usarse así:

<textarea name="codigoLenguaje" class="c#" cols="60" rows="10">
...
Y aquí vendría el código, teniendo en cuenta que
codigoLenguaje hay que sustituirlo por el alias 
del lenguaje que estemos usando
...
</textarea>

Estos son los alias disponibles:

Lenguaje	Alias
C++	cpp, c, c++
C#	c#, c-sharp, csharp
CSS	css
Delphi	delphi, pascal
Java	java
JavaScript	js, jscript, javascript
PHP	php
Python	py, python
Ruby	rb, ruby, rails, ror
SQL	sql
VB	vb, vb.net
XML/HTML	xml, html, xhtml, xslt

Hay que tener muy en cuenta una precaución: para que el código funcione correctamente debemos cambiar todos los signos < y > por sus equivalentes en HTML, es decir & lt ; y & gt ;.

Y como podéis comprobar, el código queda así de bien:

/// <summary>
/// Código para la búsqueda de empresas. Este código lo usé en el proyect (fallido) de 
/// Intranet de mi antigua empresa, Axco Consulting. Usa SubSonic, pero no lo
/// hagáis ni p*to caso, que no explica nada. Está cogido a modo de ejemplo.
/// </summary>
/// <param name="empresa">El nombre de la empresa que queremos encontrar</param>
/// <param name="FIni">Fecha de Inicio</param>
/// <param name="FFin">Fecha de Fin</param>
public void SearchEmpresas(string empresa, string FIni, string FFin)
{
CATEMPRGRUPOCollection col = new CATEMPRGRUPOCollection();
Query qry = new Query(CATEMPRGRUPO.Schema);
qry.AddWhere(CATEMPRGRUPO.Columns.IDBAJA, false);
//Validamos los criterios de búsqueda introducidos,
//para ver si los añadimos a la query o no
if (empresa != "") 
    qry.AddWhere(CATEMPRGRUPO.Columns.DSEMPRESA, 
        Comparison.Like, "%" + empresa + "%");
DateTime dFIni, dFFin;
if (ControllerUtils.IsDate(FIni) && 
    ControllerUtils.IsDate(FFin))
{
    dFIni = DateTime.Parse(FIni);
    dFFin = DateTime.Parse(FFin);
    if(dFIni <= dFFin)
    {
        qry.AddBetweenAnd(CATEMPRGRUPO.Columns.FEALTA, 
            dFIni, dFFin);
    }
}
else if (ControllerUtils.IsDate(FIni))
{
    dFIni = DateTime.Parse(FIni);
    qry.AddWhere(CATEMPRGRUPO.Columns.FEALTA, 
        Comparison.GreaterOrEquals, dFIni);
}
else if (ControllerUtils.IsDate(FFin))
{
    dFFin = DateTime.Parse(FFin);
    qry.AddWhere(CATEMPRGRUPO.Columns.FEALTA, 
        Comparison.LessOrEquals, dFFin);
}
//qry.OrderBy = OrderBy.Asc(CATEMPRGRUPO.Columns.DSEMPRESA);
col.Load(CATEMPRGRUPO.FetchByQuery(qry));
if (col.Count > 0) LlenarColeccion(col);
else _empresasList.Clear();
}

y además trae de serie la posibilidad de abrir el código en una ventana externa en texto plano, copiarlo al portapapeles e imprimirlo.

Actualización a horas completamente intempestivas (son las 01:45 en mi reloj, pero ya se sabe que el vicio es lo que tiene) para dar la noticia del cambio de diseño completo de este blog: he retocado el tema Dandelion de Tim Sherrill y lo he incorporado al blog. En los próximos días tocará retocarlo para corregir los fallos que ahora no veo. Espero que os guste.