Syntax Highlighter, presentación de código fuente en tu página web o blog

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 &lt; body &gt; 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/

Sin Comentarios

Seminario de PHP on-line totalmente gratuito el 16 de Septiembre

Introducción a PHP. Seminario online gratuito de PHP

Acabo de recibir un e-mail desde www.desarrolloweb.com desde el que me invitan a participar en un seminario online de PHP totalmente gratuito que se celebrará el próximo 16 de Septiembre. Os copio lo más interesante de al descripción del seminario y un enlace para apuntaros si estáis interesados.

Un evento “On-Line”, de 1 día de duración, nunca antes realizado en Internet, pensado para que los profesionales del diseño y la programación de páginas web, descubran toda las posibilidades de PHP. Un lenguaje de programación que en pocos años, se ha convertido en el más utilizado para el desarrollo de contenidos interactivos y páginas dinámicas en Internet.

Además, los asistentes en esta presentación, podrán disfrutar de información privilegiada probablemente desconocida por el 99,9999% de los webmasters:

Se hablará en detalle, sobre las posibilidades REALES a nivel de trabajo a las que podemos tener acceso siendo desarrolladores de páginas web. Información que sin duda aumentará considerablemente las oportunidades laborales de las personas que asistan a este evento.

Más información en http://www.dominaphp.com/registro/

Sin Comentarios