Monday, July 26, 2010

Syntax Highlighting del codi font al blogger

Al post anterior volia posar el codi font amb colorets, amb ressaltat de sintaxi, de la mateixa manera que es pot veure en qualsevol editor modern. Amb el tallar-i-enganxar de l'Eclipse pots portar-te el resaltat a un editor de texts (Word o OpenOffice.org Writer) per què per dintre exporta RTF, però després això no funciona bé en un pàgina Web.

Vaig buscar força i veig que hi ha tres tipus de solucions (potser hi ha més):
  1. A partir del codi font generar un codi HTML autònom que puguis posar a la teva pàgina Web.
  2. Generar un codi HTML juntament amb un CSS. Això pot ser problemàtic en un Blog si no vols tocar la plantilla.
  3. Fer servir un JavaScript que faci el highlight en temps d'execució.
Hi ha moltes solucions interessants de cadascuna de les tres opcions. Finalment, gràcies al David, he trobat una pàgina que conté un llistat dels millors ressaltadors de sintaxi per a la web. N'hi ha de molt potents i per tots els llenguatges.

La solució que he triat és de les primeres, un codi HTML autònom que es diu Highlight (l'onzè de la llista) i que té versió on-line i també es pot instal·lar. Jo he fet servir la versió online i funciona molt bé també per trossos de codi. De Color Theme he triat Typical i ha quedat força bé.

Pel format del blog he hagut d'editar el codi generat per reduir la mida de la font (a 8pt) i per afegir a l'estil de l'etiqueta <pre> l'opció per què pugui fer scroll horitzontal si no hi cap en una línia: overflow: scroll;.

Opino que ha quedat força bé però en un altre moment provaré alguna solució de les del JavaScript, que hi ha una de Google i un parell basades amb jQuery.

No comments: