unijimpe

SyntaxHighlighter es una librería Javascript que permite a los desarrolladores publicar código fuente mostrando la sintaxis según el lenguaje de manera sencilla y con excelente apariencia. Esta librería esta desarrollada 100% en Javascript y no necesita ningún lenguaje de servidor para su funcionamiento.

Lenguajes soportados
Esta librería posee una serie de lenguajes soportados para ser resaltados de forma automática, a continuación mostramos la lista de lenguajes y los alias que se pueden utilizar para definir el lenguaje para el resaltado:

• 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

Utilizando SyntaxHighlighter
Luego de descargar la librería desde SyntaxHighlighter_1.5.1.rar se descomprimen los archivos donde encontraras tres carpetas Scripts que contiene los archivos javascript, Styles que contiene la hoja de estilos necesaria para colorear el código y Uncompressed que contiene el código original que puede ser modificado.

Luego lo primero es incluir la hoja de estilos, el archivo shCore.js que contiene la base de la librería y luego seleccionar un archivo de acuerdo al lenguaje que vamos a mostrar, para nuestro ejemplo si deseamos mostrar HTML utilizaremos el archivo shBrushXml.js.

<link type="text/css" href="css/SyntaxHighlighter.css"></link>
<script language="javascript" src="js/shCore.js"></script>
<script language="javascript" src="js/shBrushXml.js"></script>

Lo siguiente es crear un textarea al cual debemos darle un nombre con el cual lo identificaremos y ademas asignarle una clase de acuerdo al lenguaje a mostrar, en nuestro caso html. Dentro de este textarea colocamos el código fuente a visualizar.

<textarea name="code" class="html">
   ... codigo fuente ...
</textarea>

El paso final es llamar a la función dp.SyntaxHighlighter.HighlightAll en donde definimos a que textarea vamos a resaltar, esto se hace al final de la página, es decir lo colocamos antes de cerrar el tag body.

<script language="javascript">
dp.SyntaxHighlighter.ClipboardSwf = 'js/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>

Uniendo todos estos elementos podemos mostrar el código fuente deseado, obtenemos un resultado visualmente muy bueno y con opciones para ver el código como solo texto, copiar el código y versión para imprimir como en el siguiente resultado.

Posts Relacionados

• Cached Commons: Librerías Javascript Online para tus Proyectos