El plugin mejora el bloque de código estándar con resaltado sintáctico desde el servidor, sin necesidad de JavaScript en el frontend
La edición de código en WordPress ha dado un paso adelante con el plugin Syntax-highlighting Code Block (with Server-side Rendering), una herramienta diseñada para mejorar notablemente la visualización de fragmentos de código sin comprometer el rendimiento del sitio. A diferencia de otras soluciones, esta extensión no añade bloques nuevos, sino que potencia el bloque de código nativo del editor de WordPress, agregándole resaltado de sintaxis que se renderiza directamente en el servidor.
Esto supone un cambio importante en términos de eficiencia. Al evitar la carga de bibliotecas JavaScript como Highlight.js o Prism.js, el plugin elimina el conocido «flash of unhighlighted code» (FOUC), es decir, ese momento en que el código aparece sin estilos antes de que los scripts lo procesen. Como resultado, las páginas se cargan más rápido, son compatibles con AMP y siguen funcionando incluso cuando el navegador tiene JavaScript desactivado.
Compatible con múltiples lenguajes y funcionalidades avanzadas
El plugin utiliza una versión en PHP de highlight.js llamada highlight.php, lo que le permite detectar automáticamente el lenguaje del código, aunque el usuario puede especificarlo manualmente desde la barra lateral del editor. Además, permite destacar líneas concretas del código y habilitar la numeración de líneas —estas, además, son no seleccionables, evitando copias accidentales de los números—.
También se ha tenido en cuenta un aspecto frecuentemente descuidado: el formato de línea. Debido a la inconsistencia entre temas de WordPress, el plugin fuerza por defecto el estilo no-wrap para evitar cortes indeseados, aunque permite activar el ajuste de líneas si así se desea.
Rendimiento y compatibilidad por encima de todo
Una de las principales ventajas de esta solución reside en que el resaltado se realiza una sola vez, en el momento en que se guarda el contenido en el editor. Esto significa que no hay costes de procesamiento para los visitantes de la web, a diferencia de otros métodos que cargan el trabajo al navegador. El plugin, por tanto, no solo mejora la experiencia del usuario final, sino que también alivia la carga del cliente y optimiza la compatibilidad con plugins exigentes como el oficial de AMP para WordPress.
Otro punto destacable es su compatibilidad con bloques existentes. Los bloques de código ya presentes en una instalación de WordPress serán automáticamente ampliados con el resaltado sintáctico del plugin, sin necesidad de volver a insertarlos. Y si en algún momento se decide desactivar el plugin, el contenido volverá al estado original sin pérdidas ni errores.
Código abierto y comunidad activa
Desarrollado por Weston Ruter como un fork del conocido plugin Code Syntax Block de Marcus Kazmierczak, esta versión ha conseguido atraer el interés de usuarios y desarrolladores por su enfoque limpio, eficiente y respetuoso con los estándares. Está disponible en el repositorio oficial de WordPress y su código fuente puede consultarse en GitHub, donde se mantiene de forma activa y se reciben contribuciones de la comunidad.
Una herramienta lista para usar
Sin configuraciones complicadas ni dependencias externas, Syntax-highlighting Code Block es especialmente útil para blogs técnicos, documentación de software o cualquier sitio WordPress que publique fragmentos de código. Las valoraciones de los usuarios lo confirman: desde quienes lo adoptan por su sencillez hasta quienes destacan su rendimiento superior frente a otras opciones más pesadas.
En un entorno en el que cada milisegundo de carga cuenta y donde el respeto a los estándares como AMP y la accesibilidad ganan protagonismo, este plugin se presenta como una solución elegante y eficiente. Para muchos desarrolladores y editores, puede convertirse en una herramienta imprescindible en su flujo de trabajo diario con WordPress.
