Coloreando código fuente en WordPress

Tengo este blog hace unos 5 años y en él tengo muchos posts con código fuente, pero nunca usé un plug-in para hacer syntax highlight o resaltado de sintáxis, es decir que las distintas partes del código fuente se pinten de distintos colores según su significado. Mi idea es solucionarlo.

El escenario es bastante complicado. Hay bloques de código en los que uso la etiqueta HTML <pre> y otros en los que uso la etiqueda <code>. También tengo código in-line (es decir líeas de código que forman parte de una oración) arcadas con la etiqueta <code>.

¿Qué busco?

• No quiero posts con código coloreado de ahora en adelante y que los anteriores sigan en blanco y negro.
• No quiero tener que editar cada posts para agregar algún atributo en las etiquetas pre o code. Por ejemplo, muchos plug-ins te piden que marques el código con algo como <pre lang="python"> o similar.
• Quiero que los bloques de código <pre> y <code> se vean igual.

Luego de buscar un poco, decidí instalar y probar estos plug-ins:

• WP-SynHighlight (lo descarté enseguida, tiene una GUI pesada con muchas opciones y las marcas que introduce en el post son bastante poco estándar e intrusivas)
• WP-Syntax (usa GeSHI, por lo que el coloreado se realiza en el lado del servidor)
• JQuery.Syntax (hecho con la popular librería de JavaScript)
• Google Code Prettify (está basado en tecnología de Google y posiblemente lo hayan visto en acción en StackOverflow. Su principal ventaja es que no requiere decirle en qué lenguaje está escrita la porción de código, sino que este lo adivina)

Intentar empezar a usar uno de estos plug-ins ahora, me genera un gran problema

de compatibilidad hacia atrás :)

Veamos... WP-SynHighlight no me gustó de arranque. Modifica la GUI del editor WYSIWYG the WordPress, uno selecciona una porción de código, aprieta el botón y te da unas 10 opciones para elegir (desde lenguaje hasta el número de espacios para los tabs). Puede funcionar para algún tipo de usuario, pero no para un programador. Además agrega bastante código sucio al HTML del post. Paso.

El segundo que probé fue WP-Syntax. Me gustó mucho, entre otras cosas:

• Usa CSS in-line para que el código coloreado se mantenga incluso si el posts no es leído en el blog; por ejemplo en un planeta o por RSS.
• Si el texto es más ancho que la página, agrega una barra de desplazamiento en la cajita de código.

Luego probé JQuery.Syntax y Google Code Prettify. Estos funcionan de la siguiente forma: luego de que se carga el HTML del sitio, corre código JavaScript que se encarga del coloreado. Esto hace que la carga de la página sea más lenta.

¿Qué hice?

Me decidí a usar WP-Syntax y para no editar todos los bloques de código, creé un pequeño plug-in para WordPress que cambia todos los <pre> por <pre lang="python" escaped="true">, cambié a mano los pocos bloques code que tenía por bloques pre y agregué a mano la especificación para los bloques de código que no son Python (no eran muchos).

Tampoco tengo coloreado del código in-line. De las opciones que probé solo el plug-in que usa tecnología de Google, tenía esta característica.

Si ven algún post en el que algo no quedó del todo bien, avisen!