SyntaxHighlighter

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.

  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.

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

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.

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

Comentarios Total 3 comentarios


Pipe
Publicado: 20/09/2007 7:40 pm

Una exelente herramienta, muchas gracias

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

Pepe
Publicado: 24/05/2011 10:08 pm

Muy bueno justamente es lo que estaba buscando para un proyecto, muchas gracias por el tip. Saludos!

 

Comentar

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)