Los que escribimos sobre programación, necesitamos una manera elegante y visualmente agradable de presentar nuestro código a los lectores. Yo, por ejemplo, alguna vez usé un pequeño script PHP que le pasaba mi código, y él me devolvía el HTML que resaltaba con colores palabras claves y otros elementos de PHP, C++, etc.
Últimamente he andado muy contento con JavaScript (con JQuery en realidad), y por casualidad llegó a mí SyntaxHighlighter, un resaltador de código fuente que utiliza exclusivamente javascript y css, y que se podría describir en una sola palabra: maravilloso. De verdad es una maravilla.
Es además muy muy sencillo de utilizar. Es cuestión de incluir algunos archivos javascript y css a nuestras páginas y luego encerrar nuestro código entre etiquetas PRE.
En este blog, dan indicaciones específicas para blogger. Básicamente lo que hay es que pegar justo antes de cerrar el header de nuestra plantilla, 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> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script> <script language='javascript'> SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf'; SyntaxHighlighter.all(); </script>
Sí, el código está resaltado, utilizando el resaltador. Luego, en nuestros posts, sólo tendremos que encerrar las porciones de código entre etiquetas PRE, especificando como clase "brush: alias", en donde alias es el nombre del lenguaje que se usará para resaltar. Por ejemplo, si queremos resaltar una función escrita en PHP, podemos utilizar:
<pre class="brush: php">
<?php
public void Method($saludo) {
$saludo .= " :)";
}
?>
</pre>
Sí, este código también fue resaltado utilizando el resaltador.Sencillamente maravilloso.
El único detalle que hay que tener en cuenta, es que debemos escapar todos los < (sustituirlos por el equivalente <). Yo hice un script que lo haga por mí, pero vamos que con un "replace all" en cualquier editor de texto, basta.
