Cómo mostrar código fuente en nuestras Webs con Syntax Highlighter

Cómo mostrar código fuente en nuestras Webs

Internet esta lleno fragmentos de código fuente en lenguajes como CSharp, Java, Javascript, php, SQL, Python, VB, etc.

Pues bien, en este tutorial os voy a presentar la librería SyntaxHighLighter, una librería reálmente útil para incrustar código fuente en nuestras Webs resaltándolo sintácticamente con distintos colores.

¿Cómo funciona?

Pues tan fácil, simplemente debemos:

  1. Importar en nuestra web las librerías de javascript y la css. Existe una .js para cada lenguaje de programación.

    Por ejemplo, para Java y PHP necesitaría las siguientes líneas:

  2. Insertar nuestro código dentro de tags <pre> o <textarea>
  3. Asignarles un nombre a través del atributo “name”
  4. Especificar en que lenguaje de programación está el contenido a formatear.
  5. Especificar parámetros de configuración separados por el caracter “:”
  6. Incluir el siguiente código javascript (preferiblemente en la sección head):

    Observe que le indicamos el nombre que especificamos en el segundo paso.

Algunos ejemplos

Resaltamos un pequeño fragmento de código Java:

Código HTML del ejemplo Resultado obtenido

Ahora resaltamos un pequeño fragmento de código PHP

Código HTML del ejemplo Resultado obtenido

Ahora resaltamos un pequeño fragmento de XML

Código HTML del ejemplo Resultado obtenido

Conclusiones

Desde mi punto de vista me parece una librería realmente útil, que nos permite distribuir el conocimiento de manera sencilla, pudiendo ahorrar un considerable ancho de banda, como por ejemplo a través del uso de etiquetas de las formateo tradicionales <font name=’…’>…..</font>. Aunque debe pensar que los .css y .js de la librería tienen también un peso.

Recuerde que esto es sólo una introducción, para más información consulte la web del proyecto.

Desde aquí deseo felicitar a los autores por su esfuerzo y trabajo realizado ;-).