Wed
Nov
14
2007
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.