El coloreado de sintaxis de código en WordPress parece una cosa intuitiva, pero no es cierto. Si quieres compartir código, hay varias formas de hacerlo, pero de forma nativa, solo tienes las etiquetas <pre></pre> y <code></code> que cambian de acuerdo a las configuraciones de tu plantilla, pero definitivamente no colorean el código.

Introducción

La verdad, tampoco es que sea tan necesario. Para compartir fragmentos de código, existen herramientas como pastebin y otras, mientras que para compartir proyectos de programación completos puedes usar GitHub, Codeberg y otros por el estilo. La cosa es que si quieres compartir solo unas cuantas lineas en un tutorial, consejo o sugerencia, pues vendria bien algo de ayuda.

Se me hace muy curioso como funciona esto. La mayoría de los renderizadores de MarkDown ya cuentan con coloreado de código. Esto es una función que se puede ver hasta en plataformas de chat, como Telegram, Matrix, Discord. Creo que whatsapp no tiene eso y por ahora, Delta Chat tampoco lo tiene.

Por ejemplo:

```js
console.log('Hello world!');

```

En WordPress, no hay un interprete MarkDown nativo y el que agrega jetpack se me hace muy confuso de usar. En mi post sobre el juego de la vida que escribí por completo en MarkDown, se hizo tan lioso que no lo he corregido como corresponde.

Resaltado de código en WordPress

La mayoría de los generadores de blog estáticos que usan Markdown para la generación de contenidos, ya tienen un resaltador de código integrado. Tomo por ejemplo a Astro, una herramienta que llevo rato buscando una excusa para aprender. En la documentacion ya indica que tiene soporte mediante prism.js, por lo que podríamos decir que el renderizado se realiza desde el frontend. Esto es lo optimo y lo ideal teniendo en cuenta de que es un sistema frontend, pero WordPress es principalmente backend, por lo que lo obvio y necesario seria que se pueda usar un sistema que sirva el resultado ya procesado. Mientras mas plugins y javascript, mas pesado se pone el sitio y para la capacidad de atención que tiene la gente en esta generación, es un riesgo innecesario para correr. Es interesante notar que no es un problema que me afecte solo a mi, pues, en el 2024, el blog Picando Codigo compartía sus experiencias en este tema, mientras que backendpreneur en quien sabe que fecha(no comparte la fecha de publicación de sus posts), hacia lo propio por su parte.

Herramientas que se quedan obsoletas

Por mucho tiempo, yo usaba Highlighting Code Block para resaltado de mi código, pero hace unos días noté que ya no funcionaba. Pensé que era porque estaba usando el editor clásico, puesto que el editor de bloques tiene muchas mas opciones de configuración, pero parece que no es el caso. El plugin lleva sin atención desde hace 2 años. No es demasiado problema, pero posiblemente este fallando de forma interna, puesto que no solo esta desactualizado con respecto a mi versión de WordPress, sino que también lo esta con respecto a mi version de PHP.

Entonces, la solución mas rápida seria, instalar otro plugin. Pero para no romper el resto de los post ya publicados con el anterior, no puedo desinstalarlo…

WordPress y en realidad cualquier plataforma longeva, tiene el problema de que puede crecer pero no arrastrar su ecosistema consigo. En el repo de plugins de WordPress hay una cantidad inmensa de muertos, y cada uno representa un agujero de seguridad importante, por lo que es necesario tener todo actualizado para no ser victima de ataques por vulnerabilidades.

Soluciones

La verdad, parece que las que hay, no son muy satisfactorias. Como comenta el editor de Picando Código aun si encuentra una solución, le toca editar todos los post donde se haya usado el plugin. En mi caso, así mismo va a ser, tendré que buscar todos los post donde use hcb y reemplazar por mi solución particular. 

Por ahora, las propuestas son:

• Utilizar otro plugin (no me gusta, si muere, se repite el proceso)
• Utilizar algo de JS con highlight.js prism.js o similares (no me gusta, aumento de peso de la pagina)
• Utilizar HTML directo (la mejor opción en resultado, pero no en practicidad)

Al final, es verdad, soy dev, puedo usar esta opción. Escribir el resaltado de forma directa, pero es mucho esfuerzo, así que por ahora, elijo utilizar una herramienta que encontré para resaltado por HTML llamada hilite.me y luego veré como ajustar para que sea mas fácil de usar.

La ventaja de esto es que permitirá tener resultados uniformes sin importar de cuanto cambie la infraestructura, aunque no estoy muy seguro de la compatibilidad con los temas del sitio.

1

print('hello world!')

Actualización

La verdad, creo que me ahorrare el esfuerzo de buscar que cosas han sido afectadas por el borrado del plugin, porque hasta donde vi, se ve bastante decente. Creo que solo agregare las nuevas ideas a post en adelante.