El mostrar código en tu página es muy común para los blogeros y Teqis que comparten su conocimiento, pero muchas veces un simple HTML hace difícil el compartirlo claramente. Aquí te mostramos una librería que hace que tu código sea presentado de una manera muy estilizada.

La librería SyntaxHighlighter te permite ofrecer una manera de que tu código aparezca visualmente más atractivo cuando lo presentas en tu página. Para que funcione solo tienes que bajar la librería, e incluir el siguiente código en el encabezado de tu página:


<link type="text/css" rel="stylesheet" href="css/SyntaxHighlighter.css"></link>
<script language="javascript" src="js/shCore.js"></script>
<script language="javascript" src="js/shBrushJava.js"></script>
<script language="javascript" src="js/shBrushXml.js"></script>
<script language="javascript">
window.onload = function () {
dp.SyntaxHighlighter.ClipboardSwf = '/js/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
}
</script>

Cuando descomprimes las librerías del sitio, asegúrate de cambiar los folders ‘Scripts’ a ‘js’, y ‘Styles’ a ‘css’. Dependiendo que código es el que muestras a tus usuarios, tienes que elegir la librería adecuada, Si muestras CSharp, tienes que declarar la class=”c-sharp”, en nuestro ejemplo en Java, utilizamos e incluimos la librería shBrushJava.js. Ahora tu código lo tienes que envolver en las siguientes tags:


<pre name="code" class="java">
.....CODIGO....
</pre>

¡Y listo! El código aparece formateado y de una manera muy visible a los usuarios:

SyntaxHighlighterSyntaxHighlighter

Has click aqui para ver el ejemplo en HTML.