Como resaltar la sintaxis de codigo fuente usando la libreria GeSHi y PHP

Archivo de codigo HolaMundo.c al que GeSHi le ha resaltado la sintaxis

En este articulo voi a describir que hice para resaltar la sintaxis del codigo fuente de arriba (HolaMundo.c) con ayuda de GeSHi; una libreria creada para este proposito. Con resaltar la sintaxis me refiero a que las palabras reservadas del lenguaje de programacion en cuestion son coloreadas, igualmente las cadenas con otro color, los comentarios, etc. Resaltar la sintaxis de cada palabra en forma manual seria tedioso y frustante es por eso que se a creado GeSHi.

Esta libreria esta escrita en PHP y puede resaltar la sintaxis del codigo fuente de muchos lenguajes de programacion como PHP, HTML, C, C++, Java, ASM (si, la del codigo ensamblador tambien!), etc. hasta la fecha son mas de 100 lenguajes soportados y siguen en aumento. Muchos sitios web (foros, blogs, hostings, etc) usan Geshi para resaltar el codigo porque esta libreria es gratuita y facil de usar (aunque algunos digan lo contrario). En lo personal yo la conoci cuando tenia mi pagina web personal en el host gratuito http://www.000webhost.com pues ahi al momento de abrir un archivo (html ho php por ejemplo) para verlo el sistema me lo mostraba muy bonito y eso me llamo la atencion y empece a investigar sobre como se hacia eso ya que mi idea era publicar algunos de mis programas y codigo fuente en mi pagina web personal (todavia no conocia a wordpress.com).

Actualmente e migrado mi pagina web personal a otro servidor gratuito llamado http://www.260mb.com, pero sinceramente le doy muuy poco mantenimiento a dicha pagina: pues ahora que he conocido wordpress.com me ha fascinado y definitivamente me gusta mas porque me hace las cosas mas faciles. Esa pagina todavia la mantengo por que ahi aprendi muucho sobre HTML (las etiquetas basicas, csss, frames, etc) y de PHP+MySQL (sesiones, enviar correos, paso de informacion de una pagina a otra, etc); de lo cual poco a poco ire subiendo a este blog.
Y digo poco a poco porque que feo es crecer!, ahora tengo muchas actividades que realizar durante el dia y aunque soy soltero las materias de la carrera me consumen todo el tiempo. pero a veces (como ahora mismo ) me doy mis escapadas de la realidad y me meto a este cyber espacio a publicar cosillas que me parecen super interesantes. Bueno pongo un pantallazo de mi pagina, nada mas para que se den una idea de que sencilla era y si quieren visitarla pues aqui esta www.gonzasilve.260mb, a lo mejor algo les gusta, solo pidanlo .:

Mi pagina web Personal

Creo que ya me estoy saliendo demasiado del tema, vamos a continuar pues con lo de la libreria GeSHi…

Origenes de GeSHi

GeSHi (Generic Syntax Highlighter) inicialmente nacio como una idea de tener un resaltador de sintaxis generico para el sistema de foros phpBB.

Pero ha evolucionado y ahora es totalmente independiente de éste. La razon por la que el resaltador GeSHi es tan popular es que es extremadamente personalizable para todos los gustos, incluso los mismos usuarios le podemos añadir nuevos lenguajes para resaltar ya que es muy facil añadir uno, tambien se puede indicar a GeSHi que numere las lineas de codigo, o personalizar el color de las palabras clave, etc.

Requisitos de instalacion de GeSHi

• Tener un interprete PHP (4.3.0 o superior)
• Aproximadamente 5 MB de espacio en disco.

Como se puede ver, los requisitos son solamente dos y muy faciles de cumplir con ellos.

¿Donde puedo obtener Geshi?

Geshi se puede obtener desde su pagina oficial http://qbnz.com/highlighter/, en la seccion de descargas. Desde este sitio tambien se puede acceder a la documentacion en linea de GeSHi (desafortunadamente solo en ingles), yo personalmente ya me pase por ahi y lei un poco, no toda por que es mucha informacion y yo solo necesitaba resaltar la sintaxis de algunos codigos de mi pagina web para mostrarlos en la seccion de articulos.

Instalacion de GeSHi

Creo que ya es suficiente de tanta teoria, ahora paso a explicar como usar la libreria. Voi a ir describiendo por pasos para que sea mas facil:

1. Descargar GeSHi. Obviamente, primero que nada nos dirigimos a la pagina oficial de GeSHi y damos clicken la seccion Downloads, la cual nos va a redireccionar a sourceforge.net donde podremos elegir la version de GeSHi que queremos. A la fecha actual en que estoy escribiendo esta entrada, la version mas reciente de GeSHi es la 1.0.8.10.
2. Al dar click en el link de descarga (download) se abre un cuadro de dialogo para indicar donde queremos realizar la descarga (depende de la configuracion de tu navegador). En esta ventana lo hubicamos en algun lugar dentro de nuestro disco duro y daremos click al boton Guardar . Yo por ejemplo en Linux Ubuntu tengo instalado a PHP como modulo de Apache (es decir mi maquina es un servidor) y la pagina donde se alojan las paginas web de mis servidor Apache es /usr/local/php/servidor_web/htdocs. Asi que descargue GeSHi en /usr/local/php/servidor_web/htdocs (entonces GeSHi quedo en /usr/local/php/servidor_web/htdocs/geshi-1.0.8.10.tar.gz). Si tu no tienes a tu computadora como servidor pero ya te creaste una cuenta en algun hosting gratuito por ejemplo http://www.tuwebhostgratis.algo/miusuario puedes descargar GeSHi en cualquier lugar de tu PC (en tu escritorio por ejemplo, sigue leyendo). El archivo pesa como 880 Kb.
3. Descomprimir/Desempaquetar GeSHi En mi caso yo en ubuntu solo doy click derecho al archivo y elegir Extraer aqui. Entonces ahora la libreria GeSHi esta en /usr/local/php/servidor_web/htdocs.

   Si tu usas algun otro software y no te permite hacer esto ten cuidado y no vayas a crear una carpeta para geshi ya que GeSHi ya viene comprimido en una carpeta (lo digo nada mas que nada para que no te vayas a confundir en los siguientes pasos de este articulo). En tu caso si tienes hosting gratuito (ej. http://www.tuwebhostgratis.algo/miusuario) descomprime el archivo ahi mismo en tu escritorio ( o donde lo hayas descargado) y sube la carpeta geshi completa a tu hosting gratuito con algun programa FTP (como FileZilla o SmartFTP), entonces tu libreria GeSHi quedaria en http://www.tuwebhostgratis.algo/miusuario/geshi). En mi caso de Ubuntu GeSHi quedo en /usr/local/php/servidor_web/htdocs/geshi. Esto es todo, ahora la libreria esta lista para ser usada. El archivo ya descomprimido ocupa como 5 Mb.

Resaltar tu primer codigo usando GeSHi.

Ahora vamos a hacer dos ejemplos muy sencillos para ver como se usa esta libreria, para esto voi a suponer que usas Linux Ubuntu y tienes el interprete PHP como modulo de apache ejecutandose en tu maquina. Empecemos

EJEMPLO #1; RESALTAR UN TROZO DE CODIGO
En este primer ejemplo voi a resaltar un trozo de codigo de java y en especifico voi a resaltar el metodo java que calcula el factorial de un numero.

1. El siguiente archivo pruebaGeshi1.php debes colocarlo en la carpeta raiz de tu servidor web (en el mismo nivel donde tienes la carpeta geshi), es decir, en mi caso en /usr/local/php/servidor_web/htdocs/pruebaGeshi1.php:

   <!--
              Instituto Tecnologico de Zacatepec, Morelos
   Descripcion:    Genera un Documento HTML que resalta la sintaxis de un trozo  
   				de codigo con ayuda de la libreria GeSHi.
   Author:         Gonzalo Silverio  gonzasilve@gmail.com
   Archivo:        pruebaGeshi1.php
   -->
   <HTML>
      <HEAD>
           <TITLE>Usando la libreria GeSHi I </TITLE>
      </HEAD>
   <!--Poner Fondo negro a la pagina web -->
      <BODY bgcolor="black">
      <br><br>
   	<?php
   	 require('geshi/geshi.php');            /* Incluir la libreria del resaltador de sintaxis Geshi*/
   	// Asignamos a una variable el codigo al cual queremos resaltar su sintaxis
     $trozo_codigo = "public static int factorial (int n)
   {
     int result=1;
     while(n>1)
     {
       result=result*n;
       n=n-1;
     }
     return result;
   }";
   	//Indicar el lenguaje de programacion a resaltar  
     $lenguaje="java";
   //Instanciar clase GeSHi y le pasamos el codigo a resaltar y el lenguaje
     $migeshi= & new GeSHi($trozo_codigo,$lenguaje);
   	// Activar la numeracion de lineas
     $migeshi->enable_line_numbers(GESHI_FANCY_LINE_NUMBERS, true); 
    	// cambiar estilo de numeros de lines   y el fondo
     $migeshi->set_line_style('background: yellow', 'background: #DFEEF3', true);   
   	?>
   <!-- A continuacion metemos dentro de una tabla HTML el codigo ya resaltado
   		la funcion parse_code() se la clase GeSHi permite mostrar en el navegador
   		el codigo fuente ya resaltado.
    -->
      <table width = "90%"  align="center" cellpadding="0" cellspacing="0" bgcolor="white" border=0 bordercolor="#000000">
        <tr><td><?php echo $migeshi->parse_code(); ?></td></tr>
      </table>
   <br>
      </BODY>
   </HTML>
   

   Como vez en los comentarios e puesto lo que hace cada cosa. Una linea que me parece muy importante y que me gustaria mencionar es la linea donde se incluye a la libreria GeSHi, es decir en la linea:

    require('geshi/geshi.php');
   

   Es en esta linea donde indicamos que la libreria GeSHi esta ubicada dentro dentro de una carpeta llamada geshi. Menciono esto porque un error muy comun es trata de incluir a la libreria erroneamente asi:

    require('geshi.php');
   

   ho colocar el archivo .php dentro de la carpeta de geshi e intentar incluir la libreria con require(‘geshi/geshi.php’), siendo que la libreria esta ai mismo donde esta el archivo .php (espero que me hayas entendido).

2. Probar el ejemplo. A continuacion abre un navegador y en la barra de direcciones escribes http://localhost/pruebaGeshi1.php y presionas la tecla ENTER, te debe aparecer algo como esto:
   
   

   Trozo de codigo java al que GeSHi le a resaltado la sintaxis

Como ves yo e indicado el puerto en la barra de direcciones porque con ese puerto configure a mi apache cuando lo instale, pero a ti te deberia funcionar sin especificar el puerto si hiciste una instalacion tipica (por defecto el navegador usa el puerto 80, y no es necesario indicarlo). Bueno ahora vamos con el 2do ejemplo:

EJEMPLO #2; RESALTAR UN ARCHIVO DE CODIGO FUENTE
En este 2do ejemplo voi a mostrar como resaltar un todo un archivo de codigo fuente y en especifico voi a resaltar un archivo de codigo fuente de C; el clasico Hola Mundo.

1. El siguiente archivo HolaMundo.c colocalo en la raiz de tu servidor web (en mi caso en /usr/local/servidor_web/htdocs). Este archivo es el que GeSHi va a leer y le va a resaltar su sintaxis:

   /* 
     Descripcion:	El programa clasico del "Hola mundo"; muestra un mensaje en pantalla 
     Author:		Gonzalo Silverio   gonzasilve@gmail.com
     Archivo:		HolaMundo.c
   */
   
   /* Inclusion de librerias estandar */
   #include<stdio.h>
   #include<conio.h>
   
   int main(void)			/* Rutina principal */
   {
    clrscr();				/* Limpiar la pantalla */
    printf("Hola mundo!\n");	/* Muestra mensaje y salta de linea*/
    getch();				/*Espera a que el usuario presiona 1 tecla*/
    return 0;				/* Termina el programa normalmente*/
   }
   

2. El siguiente archivo PruebaGeshi2.php colocalo en la raiz de tu servidor web (en mi caso en /usr/local/servidor_web/htdocs). Este es el que leera el archivo anterior (HolaMundo.c), le resaltara la sintaxis y lo mostrara en el navegador. En los comentarios explico cada cosa:

   <!--
              Instituto Tecnologico de Zacatepec, Morelos
   Descripcion:    Genera un Documento HTML que resalta la sintaxis del codigo fuente 
   				de un archivo con ayuda de la libreria GeSHi y lo muestra en el navegador.
   Author:         Gonzalo Silverio  gonzasilve@gmail.com
   Archivo:        pruebaGeshi2.php
   -->
   <HTML>
      <HEAD>
           <TITLE>Usando la libreria GeSHi II </TITLE>
      </HEAD>
      <!-- Fondo de pagina negro -->
      <BODY bgcolor="black">
      <br><br>
   	<?php
   	 require('geshi/geshi.php');            /* Incluir la libreria del resaltador de sintaxis Geshi*/
   	$archivo = "HolaMundo.c";               /*Indicar cual archivo abrir*/
   	/*abrimos el archivo en modo lectura*/  
     $punteroArch = fopen($archivo,'r');         
   	/* leemos el archivo */
     $codigo = fread($punteroArch, filesize($archivo));       
   	/*Indicar el lenguaje de programacion a resaltar*/  
     $lenguaje="c";	
   	/*Instanciamos la clase, le pasamos el codigo a resaltar y el lenguaje*/
     $migeshi= & new GeSHi($codigo,$lenguaje);
   	/* Activar la numeracion de lineas */
     $migeshi->enable_line_numbers(GESHI_FANCY_LINE_NUMBERS, true);    
    	/* cambiar estilo de numeros de lineas*/  
     $migeshi->set_line_style('background: yellow', 'background: #DFEEF3', true);
   	?>
   <!-- A continuacion metemos dentro de una tabla HTML el codigo ya resaltado
   		la funcion parse_code() se la clase GeSHi permite mostrar en el navegador
   		el codigo fuente ya resaltado. -->
      <table width = "90%"  align="center" cellpadding="0" cellspacing="0" bgcolor="white" border=0 bordercolor="#000000">
        <tr><td><?php echo $migeshi->parse_code(); ?></td></tr>
      </table>
   	<?php
     fclose($punteroArch);   /* Cerrar el archivo abierto */
   	?>
   <br><br>
      </table>
      </BODY>
   </HTML>
   

   Nuevamente vuelve a abrir un navegador y en la barra de direcciones escribe la direccion http://localhost/pruebaGeshi2.php y presionas la tecla ENTER, te debe aparecer algo como la imagen que esta al principio de esta entrada de blog, bueno la pongo otra vez:
   

   

   Archivo de codigo HolaMundo.c al que GeSHi le ha resaltado la sintaxis

   Hasta aqui le voi a dejar y espero que me hayas entendido la mayoria. Si tienes dudas o quieres los fuentes puedes dejar tu comentario con tu e-mail y con gusto si puedo te ayudo a hacer funcionar esto. hasta pronto.