Syntax Highlighter - Publicando ejemplos de codigos

Para publicar ejemplos de códigos en una página web (o en un blog como este), es necesario realizar una serie de pasos para evitar que el navegador web los interprete (en caso de ser html) o que elimine pequeños estractos creyendo que debe interpretarlos.

Por otro lado, se pierde mucho la legibilidad del código como consecuencia de una pérdida de la identación (los espacios, tabs, etc.). Como yo siempre he sido partidario de hacer mis ejemplos lo mas entendibles que pueda, no estaba contento con la solución que habia resuelto para publicar ejemplos de códigos hasta la fecha, y estaba buscando como loco una solución que me coloreara los codigos (tal cual como lo hace DreamWeaver, Visual Studio, Eclipse, etc.), que me mantiviera la identacion y que me enumerara las lineas.

Despues de buscar por casi 6 meses ¡¡¡Lo consegui!!! todo el problema era colocar las palabras correctas en google (como siempre), en este caso habia que colocar "Syntax Highlighter" y daríamos con la solución.

Para que vean la diferencia les voy a colocar un ejemplo de como estaba publicando los ejemplos hasta hoy y de como los voy a publicar de aqui en adelante:

Códigos hasta el dia de hoy :S

<?php
function sumar($a,$b)
{
return $a+$b;
}

function restar($a,$b)
{
return $a-$b;
}

echo "La suma es: " . sumar(2,3) . "</br>";
echo "La resta es: " . restar(2,3);

?>

Códigos a partir de hoy :)

<?php
function sumar($a,$b)
{
return $a+$b;
}

function restar($a,$b)
{
return $a-$b;
}

echo "La suma es: " . sumar(2,3) . "</br>";
echo "La resta es: " . restar(2,3);

?>

Como pueden ver hay una gran diferencia ademas de que ahora existe el boton para copiar el codigo de una sola vez sin tener que estar seleccionandolo. Espero que les guste porque todo es para que sea mas entendible. Ahora voy a explicar como instalar este plugin de blogger para los que quieran publicar codigos ejemplos como yo.

Instalacion de Syntax Highlighter para Blogger (Blogspot)

Son unos pasos muy basicos:

• Ir a esta pagina y hacer click en el botón "Add to Blogger".

• Serán redireccionados a bloger y deberán introducir el nombre del plugin, yo lo deje vacio para que no apareciera visualmente en el blog, únicamente me interesaba que el codigo javascript se ejecutara dentro de la pagina (y para eso hay que agregarlo al blog).

• De ahora en adelante pueden publicar códigos siempre que los coloquen dentro de los siguientes tags:

<pre name="code" class="php">
... tu codigo transformado
a caracteres que no sean interpretados
por tu navegador va aqui...
</pre>

• Es importante cambiar el atributo "class" por el nombre del lenguaje que estemos utilizando, en la siguiente tabla se pueden conocer todos los alias de los lenguajes soportados:
  

• Por último es bueno saber que podemos configurar algunas opciones mas como si queremos un botón para expandir y contraer el bloque de codigo, el numero de line por el que deseamos empezar, etc. Para eso entramos a la pagina donde explican la configuracion.

Bueno eso es todo amigos, les dejo un ejemplo de uso de la librería fuera de blogger, es decir, en mi máquina, para hacer esto no tienen mas que importar los javascript y css que vienen dentro de los directorios Scripts y Styles del archivo

SyntaxHighlighter_1.5.1.rar.

Espero que les haya sido de utilidad y cualquier duda no duden en escribirme a aalejo@gmail.com.