Esta herramienta, basada en JavaScript, para mostrar código fuente correctamente resaltado, tal como si lo estuviésemos viendo en un IDE, me ha parecido de lo más útil para todos aquellos que tengáis un blog de programación o, simplemente, que queráis añadir entradas con código en alguna ocasión.
A continuación va un pequeño tutorial sobre cómo utilizar SyntaxHighlighter en Blogger:
1.- Ir a la pestaña de "Diseño" de vuestro blog.
2.- Hacer clic sobre "Edición de HTML".
3.- Dentro de la cabecera, es decir, entre las etiquetas <head> y </head> añadir lo siguiente:
<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'/>
<!-- A CONTINUACIÓN, LOS "BRUSHES" -->
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.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>
Con esto "instalamos" SyntaxHighlighter en el blog y también se añaden los diferentes "brushes", según los lenguajes de programación que se van a utilizar en el blog (se pueden añadir posteriormente si vamos a poner algo en otro lenguaje). En mi caso he puesto para Java, JavaScript y HTML.
4.- Finalmente hacemos clic en "GUARDAR PLANTILLA" y ya podemos crear o editar nuestras entradas con código para darle otro aire al blog.
5.- Al editar entradas...
- Debemos ir a "Edición de HTML".
- Allí añadimos las etiquetas:
<pre class="brush: java">
<!-- AQUÍ VA EL CÓDIGO -->
</pre>
- Y entre las etiquetas copiamos el código que queremos mostrar.
- Cambiaremos "brush: java", según el lenguaje que vayamos a utilizar. Por ejemplo, parte del texto de esta entrada (con "brush: xml"):
REFERENCIAS:
Durante el tiempo que llevo utilizando SyntaxHighlighter, me ha dado algunos problemas, a veces, con los bucles (for y while) en Java, pero de resto todo ha ido genial y da un aspecto más claro y legible al blog.
Para resolver estos problemas con bucles, lo que he hecho ha sido borrar en "Edición de HTML" el código que modificaba el SyntaxHighlighter y después, en "Redactar" volver a copiar el código que falta (es decir, a partir del bucle).
Espero que se entienda, si no, para eso estoy aquí :)
