Si deseas mostrar en tu página web o blog el código fuente de un script o de cualquier aplicación, te encontrarás con el problema de que muchos caracteres, e incluso trozos de código, no aparecerán correctamente al ser interpretados como etiquetas HTML o de un lenguaje de programación (PHP, ASP, JavaScript, etc.).
Cuando escribimos un código fuente en una página, nuestra intención es mostrar todos los elementos que lo forman para que pueda ser comprendido correctamente. Por ello, una solución podría ser traducir a HTML aquellos caracteres que puedan ser malinterpredados por ser equivalentes o formar parte de elementos clave de un determinado lenguaje de programación orientado a páginas web. Por ejemplo, en vez de escribir la etiqueta <body>, podríamos traducir los corchetes a HTML, de tal forma que el resultado sería < body > y el código aparecería sin ser interpretado.
Sin embargo, tenemos a nuestra disposición una herramienta gratuita que además de permitirnos escribir código fuente sin necesidad de traducir ningún caracter, nos lo mostrará de una forma profesional, indicando el número de cada línea y cambiando los colores de los elementos según su función dentro del lenguaje de programación en el que esté escrito.
»
Syntax Highlighter es un proyecto OpenSource de Google Code que nos permite publicar un código fuente de forma sencilla, con un aspecto similar al de cualquier aplicación de desarrollo y cambiando los colores de aquellos elementos clave (funciones, tipos de variables, etc.), para ello, disponemos de librerias Javascript para los distintos tipos de lenguajes de programación (php, asp, javascript, java, c, c++, c-sharp, etc.). Y lo mejor de todo es que cada librería tan sólo ocupa 4kb, por lo que apenas se notará en la carga de la página.
Para poder instalarlo en nuestra página web debemos bajar un paquete con varios ficheros javascript, css y swf. Lo ideal es estructurarlo en tres carpetas, y en cada una de ellas guardar los ficheros correspondientes.
Una vez lo hemos subido a nuestra web, tenemos que añadir en la cabecera de la página el siguiente código:
Si el código que vamos a escribir no es de C-Sharp, entonces tendremos que importar la librería correspondiente: shBrushJScript.js, shBrushPhp.js, etc.
Para que nuestro código aparezca correctamente, tendremos que meterlo entre la etiqueta <pre></pre>. Esta etiqueta HTML permite que cualquier texto escrito dentro de ella aparezca con los espacios en blanco que tenga y no se compacten en uno solo. De esta forma, podemos escribir texto tabulado a base de espacios. Además, tendremos que asignar un name="code" y un class a dicha etiqueta. El class dependerá del lenguaje que vayamos a mostrar, ya que establece la relación con la librería javascript correspondiente. Por ello, es importante que no olvidemos importarla. Por ejemplo, si el código es PHP, el class será class="php". Para el resto de lenguajes tenemos las indicaciones en la web del proyecto.
<pre name="code " class="c-sharp">
... aquí el código ...
</pre>
El trozo de código podremos copiarlo al portapapeles, abrirlo en una ventana nueva o incluso imprimirlo a través de varios botones situados en la parte superior.
Más info | http://code.google.com/p/syntaxhighlighter/