---
title: "SyntaxHighlighter Evolved en WordPress: uso y alternativas"
description: "SyntaxHighlighter Evolved aún puede servir para entradas antiguas, pero conviene conocer sus avisos de compatibilidad y las alternativas actuales para mostrar código."
url: https://wpdirecto.com/destaca-tu-codigo-fuente-con-wordpress-con-syntaxhighlighter-evolved/
date: 2012-01-30
modified: 2026-09-10
author: "David Carrero Fernández-Baillo"
image: https://wpdirecto.com/wp-content/uploads/2026/09/syntaxhighlighter-wordpress-codigo.png
categories: ["Plugins"]
tags: ["código fuente", "css", "javascript", "php"]
type: post
lang: es
---

# SyntaxHighlighter Evolved en WordPress: uso y alternativas

**SyntaxHighlighter Evolved sigue disponible en el directorio oficial de WordPress, pero ya no debería ser la primera opción para una instalación nueva**. El plugin conserva compatibilidad con el editor de bloques y sirve para mostrar código con colores, aunque su ficha avisa de que no se ha probado con las tres versiones principales más recientes de WordPress.

Este artículo se publicó originalmente en 2012, cuando era habitual insertar fragmentos con shortcodes y el editor clásico. Hoy WordPress incluye un bloque Código y hay alternativas que cargan menos JavaScript o se integran mejor con Gutenberg. Si tienes entradas antiguas con SyntaxHighlighter Evolved, no hace falta cambiarlas todas de golpe; conviene revisar primero si el plugin funciona bien con la versión actual de tu web.

## Qué hace SyntaxHighlighter Evolved

SyntaxHighlighter Evolved convierte fragmentos de PHP, CSS, JavaScript, HTML, SQL y otros lenguajes en bloques de código con colores y formato legible. El proyecto utiliza la librería JavaScript SyntaxHighlighter y ofrece un bloque propio para el editor de WordPress.

La versión publicada en WordPress.org es la 3.7.2. La ficha oficial indica que necesita WordPress 5.7 o superior, PHP 7.0 o superior, tiene más de 20.000 instalaciones activas y figura probada hasta WordPress 6.7.7. Es una información útil, pero también deja claro que hay que comprobar la compatibilidad con la versión que tengas instalada antes de activarlo en producción.

## Cómo instalarlo y usarlo hoy

La instalación se hace desde **Plugins → Añadir nuevo**. Busca *SyntaxHighlighter Evolved*, comprueba que el autor sea Alex Mills y revisa la fecha de actualización antes de instalar. Si ya tienes código publicado con el plugin, haz una copia y prueba la actualización en staging.

En el editor de bloques puedes insertar el bloque **Code** que añade el plugin y escoger el lenguaje desde su configuración. Para un fragmento sencillo también puedes usar el bloque Código que trae WordPress de serie. No necesitas subir manualmente un ZIP ni borrar la carpeta anterior, dos pasos que eran habituales en los tutoriales de hace años.

Las entradas antiguas pueden conservar shortcodes como este:

`
function mi_funcion() {
return 'Hola, WordPress';
}
`Lenguaje del código: JavaScript (javascript)

Si el contenido se ve bien, no hay motivo para reescribirlo solo por cambiar de editor. El problema aparece cuando el plugin deja de cargar sus estilos, el shortcode se muestra como texto plano o una optimización de JavaScript rompe el resaltado. En esos casos, revisa primero el HTML generado, la consola del navegador y las exclusiones de tu plugin de caché.

## Un ejemplo útil para artículos de WordPress

Los lectores suelen copiar el código que publicamos, así que merece la pena mostrar ejemplos completos y pequeños. Este fragmento carga una hoja de estilos desde un tema o plugin usando el hook adecuado:

`add_action( 'wp_enqueue_scripts', function () {
wp_enqueue_style(
'mi-estilo',
get_stylesheet_uri(),
array(),
'1.0'
);
} );`Lenguaje del código: PHP (php)

Para que un ejemplo sea útil, indica dónde debe colocarse, qué versión de WordPress necesita y qué parte debe adaptar el lector. No incluyas contraseñas, tokens ni claves de servicios externos. Si quieres ampliar la carga correcta de CSS en WordPress, puedes consultar también nuestra guía sobre [wp_enqueue_style()](https://wpdirecto.com/funcion-wp_enqueue_style/).

## ¿Sigue siendo recomendable?

Para mantener un archivo antiguo que ya depende de sus shortcodes puede seguir siendo práctico. La propia ficha confirma que tiene bloque para Gutenberg y que el proyecto continúa disponible. Aun así, el aviso de compatibilidad con las últimas versiones merece atención: no lo instalaría sin probarlo antes si el sitio usa WordPress reciente, PHP nuevo o un sistema de caché que combine scripts.

Para una web nueva empezaría por el bloque Código de WordPress. Si necesitas colores por lenguaje, selección de líneas o un bloque más completo, compararía las alternativas siguientes. Elige por el resultado que necesitas, no por conservar una herramienta de 2012.

## Alternativas actuales para mostrar código

### 1. Bloque Código de WordPress

La opción más sencilla es no instalar nada. El [bloque Código oficial](https://wordpress.org/documentation/article/code-block/) permite mostrar fragmentos con tipografía monoespaciada, enlaces, colores y ajustes de tamaño, espacio y borde. No ofrece resaltado de sintaxis completo, pero para snippets cortos suele ser suficiente y evita añadir dependencias en el frontend.

### 2. Syntax-highlighting Code Block, con renderizado en servidor

[Syntax-highlighting Code Block](https://wordpress.org/plugins/syntax-highlighting-code-block/) amplía el bloque Código de WordPress y genera el resaltado en el servidor. Según su ficha oficial, así no necesita cargar JavaScript de Highlight.js o Prism.js en la parte pública y evita que el visitante vea durante un instante el código sin formato. Es una alternativa interesante para blogs técnicos que publican muchos fragmentos y quieren controlar el peso del frontend.

### 3. Highlighting Code Block

[Highlighting Code Block](https://wordpress.org/plugins/highlighting-code-block/) añade un bloque propio al editor y también mantiene soporte para el editor clásico. Su documentación incluye lenguajes habituales como PHP, CSS, JavaScript, TypeScript, Python, SQL, JSON, Bash y Git. Puede ser una buena elección si quieres seleccionar el lenguaje desde el bloque y conservar una edición cómoda para el equipo.

## Comparativa rápida

| Opción | Cuándo elegirla | Ojo con esto |
| --- | --- | --- |
| Bloque Código | Snippets sencillos sin instalar plugins | No colorea todos los lenguajes |
| SyntaxHighlighter Evolved | Entradas antiguas con sus shortcodes | La ficha avisa de compatibilidad pendiente |
| Syntax-highlighting Code Block | Resaltado con renderizado en servidor | Comprueba los lenguajes que necesitas |
| Highlighting Code Block | Bloque dedicado y selector de lenguaje | Revisa su configuración y estilo con tu tema |

## Cómo migrar artículos antiguos

1. Haz una copia de la base de datos y de los archivos.
2. Elige dos o tres entradas con código y pruébalas en una copia de la web.
3. Comprueba que los caracteres como `<`, `>`, comillas y sangrías se conservan.
4. Decide si mantienes los shortcodes o conviertes los fragmentos al bloque Código.
5. Revisa el resultado en móvil y prueba el botón de copiar si tu plugin lo ofrece.
6. Solo después aplica el cambio al resto de artículos.

No sustituyas todos los shortcodes con una búsqueda masiva sin comprobar antes el formato de cada entrada. Un carácter mal escapado puede convertir un ejemplo válido en HTML roto. Para revisar la integridad de los archivos del núcleo puedes consultar también nuestra guía sobre [los ficheros de WordPress y sus checksums](https://wpdirecto.com/lista-completa-de-ficheros-por-defecto-de-wordpress/).

## Nuestra recomendación

SyntaxHighlighter Evolved sigue siendo válido para conservar contenido existente, pero lo trataría como una pieza de mantenimiento, no como la elección automática para una instalación nueva. Para empezar desde cero, el bloque Código de WordPress cubre muchos casos. Si el resaltado es importante, Syntax-highlighting Code Block destaca por no cargar JavaScript en el frontend, mientras que Highlighting Code Block ofrece una experiencia de bloque más completa.

## Fuentes oficiales

Información consultada en la ficha oficial de [SyntaxHighlighter Evolved](https://wordpress.org/plugins/syntaxhighlighter/), la documentación del [bloque Código de WordPress](https://wordpress.org/documentation/article/code-block/), [Syntax-highlighting Code Block](https://wordpress.org/plugins/syntax-highlighting-code-block/) y [Highlighting Code Block](https://wordpress.org/plugins/highlighting-code-block/).