🎨 Cómo agregar resaltado de sintaxis (syntax highlighting) en Blogger sin editar tu plantilla

🎨 Cómo agregar resaltado de sintaxis (syntax highlighting) en Blogger sin editar tu plantilla

Si tienes un blog técnico y compartes código fuente (SQL, Python, JavaScript, HTML, etc.), es muy útil tener resaltado de sintaxis para que se vea profesional y sea más fácil de leer.

En esta guía te muestro cómo usar Prism.js, una librería ligera y moderna, sin necesidad de modificar tu plantilla de Blogger.

✅ Paso 1: Edita tu entrada en modo HTML

1. Ve a Blogger y crea o edita una entrada.
2. Cambia al modo "HTML" (no uses el modo "Redactar").

✅ Paso 2: Inserta los siguientes enlaces de Prism.js al inicio del post

<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-sql.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>

👉 Puedes agregar más lenguajes si los necesitas. Prism tiene componentes para casi todos: Java, PHP, Bash, etc.

✅ Paso 3: Escribe tu código dentro de etiquetas <pre><code>

Ejemplo para SQL:

SELECT nombre, salario
FROM empleados
WHERE salario > 3000;

Ejemplo para Python:

def saludar(nombre):
    print(f"Hola, {nombre}")

📝 Notas importantes:

• Edita siempre el post en modo HTML al pegar código.
• Si copias código desde un editor, asegúrate de reemplazar caracteres especiales como < por <.
• Prism se carga solo cuando visitas el post; no necesitas instalar nada.

🎉 Resultado final

Tu código se verá limpio, profesional y colorido, ideal para lectores técnicos.