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.
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.
Comentarios Total 2 comentarios
Publicado: 20/09/2007 7:40 pm
Una exelente herramienta, muchas gracias
Publicado: 21/09/2007 12:37 pm
[...] No pondre como instalarlo ya que encontre un excelente articulo que explica como hacerlo. Les pongo el enlace aqui. [...]