Diariamente me nutro de un monton de blogs para conocer que esta pasando en este ambito tan cambiante. Una de las cosas que me sorprendio es ver como mostraban los ejemplos de codigo de una manera formateada y con syntax coloring.
SyntaxHighlighting es una API desarrollada por Alex Gorbatchev la cual permite decorar codigo fuente en web pages. Es super sencillo de usar y el resultado puede ser algo como esto.
// some java code
public void doSomething() {
//this is a nice comment
System.out.println("some output")
}
// some javascript code
function doSomething() {
//this is a nice comment
var a = "some value"
document.write(a);
}
Para implementarlo hay que bajarse la API que es un RAR file y lo podes encontrar aca. Tenes que incluir algunos scripts en tu pagina web de esta manera dentro del <HEAD>.
<link type="text/css" rel="stylesheet" href="css/SyntaxHighlighter.css"></link> <script src="js/shCore.js"></script> <script src="js/shBrushJava.js"></script> <script src="js/shBrushXml.js"></script>
Hay un js (shBrushXml.js) por tipo de lenguage y tenes que poner los que estes interesado. En mi caso solo tengo linkeados los shBrushXml (q abarca todos los markup , xml, html , xsl, etc) , shBrushJavaScript y shBrushJava.
El codigo que queremos formatear tiene que estar entre tags <PRE>, debe llevar un nombre e implementar una clase. Aca un ejemplo.
<pre name="code" class="java"> ... some java code here ... </pre>
Luego en el footer o en alguna function que se ejecute despues del evento onload del documento (ya tiene que estar renderizado todo el documento , como por ejemplo <body onload="init();">) se pone esta funcion para formatear el codigo.
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
Espero les sirva.
