Publi

Coloreando código con GeSHi

geshiCuando queremos publicar código fuente por Internet (como en esta web), debemos hacer que los usuarios se sientan bien con el código y que sea agradable de leer. Además del indentado, es de agradecer la introducción de colores, que separen palabras clave, identifiquen cadenas, funciones de biblioteca, funciones propias, números y demás elementos que encontramos en un fragmento de código.

Por Internet, podemos encontrar una biblioteca muy útil para este propósito: GeSHi. Vamos a intentar hacer algo sencillo con ella.

Para instalarla simplemente tenemos que descargarla y descomprimirla en uno de los directorios de nuestra web (no tiene por qué ser el principal), a continuación vamos a hacer un pequeño programa que mostrará el código fuente de un fichero PHP. Suponemos que geshi.php está situado en el mismo directorio que este ejemplo:

1
2
3
4
5
6
7
8
9
10
<?php
// Basado en los ejemplos de la página oficial
require_once("geshi.php");

$codigo=file_get_contents('mi_programa.php');

$ges=new GeSHi($codigo, 'php');

echo $ges->parse_code();
?>

Con este pequeño ejemplo, se mostrará de forma coloreada el código seleccionado, aunque es conveniente el uso de cachés, es decir, es una buena idea almacenar el código coloreado, es decir, el contenido que devuelve $ges->parse_code() en un archivo aparte y cargar directamente este archivo en la siguiente petición de la página. Por ejemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php
include_once 'geshi.php';

function color_source_file($source_file, $language)
{
  $source_cache='cache/'.basename($source_file).'_'.$language.'.cache';
  if (@filemtime($source_cache)<filemtime($source_file))
    {
      $geshi= new GeSHi(file_get_contents($source_file), $language);
      $highlighted_source=$geshi->parse_code();
      file_put_contents($source_cache, $highlighted_source);
      return $highlighted_source;
    }
  return file_get_contents($source_cache);
}

$source = 'mi_programa.php';

echo color_source_file($source, 'php');
?>

Este código es capaz de guardar en un fichero el html generado por GeSHi en un archivo de caché (se guardará en un directorio llamado cache, el nombre del fichero será el mismo que el espeficado y su formato será [nombre]_[lenguaje].cache . La decisión se toma en base a las fechas de modificación de los archivos. Si el archivo de caché no existe (por eso la @ para que no devuelva fallos PHP) o su fecha de modificación es anterior a la fecha de modificación del archivo fuente, se generará un nuevo archivo de caché y se devolverá el código coloreado. Si no, se devolverá el código coloreado leyendo directamente del archivo de caché.

Activar números de línea

Lo podemos hacer así:

1
$ges->enable_line_numbers(GESHI_FANCY_LINE_NUMBERS);

Si ponemos GESHI_FANCY_LINE_NUMBERS cada 5 líneas saldrá el número en negrita, si ponemos GESHI_NORMAL_LINE_NUMBERS no sucederá así.

Resaltar líneas

Para resaltar líneas, debemos crear un array con los números de línea que queremos resaltar:

1
$lineas=array(5,6,7,43,53,54)

Y luego escribir:

1
$ges->hightlight_lines_extra($lineas);

Personalizando los estilos

Para ello podemos utilizar CSS. Por defecto GeSHi personaliza el style=”” de cada etiqueta, aunque genera mucho código html que podemos ahorrar. Para ello, podemos utilizar lo siguiente:

1
2
$ges->enable_classes();
file_put_contents('codigo.css', $ges->get_stylesheet(false));

Así crearemos un archivo .css que contendrá todos los estilos que puede tener un código fuente en un determinado lenguaje (en el cual hemos inicializado la clase), luego podemos incluir ese CSS ya generado en nuestro html resultante, y cambiar los colores, tipos de letra, etc.

GeSHi tiene muchísimas más opciones, para saber más, basta con un vistazo a la documentación oficial (en inglés) para descubrir todas las posibilidades de esta clase.

También podría interesarte...

There are 4 comments left Ir a comentario

  1. Pingback: Bitacoras.com /

  2. Pingback: Poesía binaria » Herramientas Open Source para colorear código /

  3. Horacio /
    Usando Google Chrome Google Chrome 21.0.1180.89 en Windows Windows 8

    ola disculpa como le puedo poner el geshi en mi blogger?? es que no entendi muy bien la explicacion del tema me revolvi mucho me podrias poner los pasos enumerados gracias de antemano 🙂

    1. admin / Post Author
      Usando Mozilla Firefox Mozilla Firefox 16.0 en Ubuntu Linux Ubuntu Linux

      Lo siento Horacio, pero no tengo experiencia con Blogger, de todas formas seguro que encuentras alguna herramienta interesante, si no esta (para WordPress) seguro que hay alguna otra.

Leave a Reply