SyntaxHighlighter

  • 19/09/2007
  • 10:49 am
  • 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.

syntaxhighlighter.gif

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.

HTML:
  1. <link type="text/css" href="css/SyntaxHighlighter.css"></link>
  2. <script language="javascript" src="js/shCore.js"></script>
  3. <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.

HTML:
  1. <textarea name="code" class="html">
  2.    ... codigo fuente ...
  3. </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.

HTML:
  1. <script language="javascript">
  2. dp.SyntaxHighlighter.ClipboardSwf = 'js/clipboard.swf';
  3. dp.SyntaxHighlighter.HighlightAll('code');
  4. </script>
  5. </body>
  6. </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.

syntaxhighlighter-demo.gif

Posts Relacionados

  • No related posts

Total de Comentarios: 2

Publicidad
Pipe
20/09/2007
7:40 pm

Una exelente herramienta, muchas gracias

Seraphinux » Blog Archive » SintaxHighLighter
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. [...]

Enviar Comentario

(*)

(*)