February 2nd, 2010 by JuanK

WordPress es una poderosa herramienta de publicación web muy frecuentemente utilizada para hacer Blog como este .

Para efectos de inserción de código WordPress permite utilizar la etiqueta <code> con la cual, combinándola con la etiqueta <pre> se pueden obtener resultados como se pueden ver en este ejemplo:

int main()
{
   printf("Hola Mundo"):
   return 0;
}

Sin embargo cuando se busca obtener resultados mas estilizados y profesionales se hace necesario colorear la sintaxis del códigos manualmente y pensar en soluciones de tipo javascript para obtener los números de línea, esto es demasiado trabajo y se invierte mucho tiempo en algo que no es el objeto e la publicación, en ese caso que se debe usar GeSHi para obtener un resultado como este:

int main()
{
   printf("Hola Mundo"):
   return 0;
}

utilizando solo un par de líneas en php.
Infortunadamente por diferentes razones, seguramente de seguridad, WordPress no permite utilizar php dentro del código HTML de cada articulo publicado… mala suerte.

Sin embargo WordPress permite incorporar plugins fácilmente y afortunadamente ya alguien se tomo el trabajo de hacer un plugin de Geshi para WordPress, dicho plugin se puede descargar en esta página: Click!

Gracias a ese plugin es muy sencillo utilizar Geshi en WordPress y una vez activado basta con utilizar de la manera habitual el tag <code> para obtener resultados; para seleccionar el lenguaje del codigo fuente se puede usar el atributo lang:

int main()
{
  printf("Hola Mundo"):
  return 0;
}

Para habilitar los números línea en el plugin basta con adicionar unas líneas al comienzo del archivo geshi.php (el del plugin), este es un ejemplo de ello, este código (el cual usa esta pagina) lo inserte en le línea 39:

$geshi->enable_line_numbers(GESHI_FANCY_LINE_NUMBERS, 5);
$geshi->set_overall_style('background-color: #ffffff; font-size:small; overflow:auto;');
$geshi->set_line_style('color: #000080;', 'color: #000000; font-weight:bold;');
$geshi->set_code_style('background-color:#ffffff; color: #000000; font-weight:normal; size:inherit');

Eso es todo y es muy sencillo, saludos.

Juan Carlos Ruiz Pacheco
Ingeniero de Sistemas