Uno de los problemas habituales al gestionar contenido técnico en un blog es la inconsistencia en los bloques de código. Dependiendo de si el contenido viene de un editor, de ChatGPT o se escribe manualmente, el HTML puede variar muchísimo.
La solución en este caso fue clara: construir un sistema propio, ligero y totalmente controlado.
Enfoque general
La implementación es deliberadamente simple:
- Sin librerías externas
- Aproximadamente 100 líneas de CSS + JavaScript vanilla
- Integrado directamente en la plantilla
single.blade.php
Todo el procesamiento ocurre en cliente, al cargar la página.
Qué hace el sistema
El script analiza el contenido dentro de .post-content y normaliza cualquier bloque de código en tres escenarios distintos.
1. Código pegado desde ChatGPT
Cuando se pega contenido generado por ChatGPT, suele venir con estructuras complejas y clases internas como:
cm-contentcm-editorcode-block-viewerbg-token-bg-elevated-secondary
El script detecta estos patrones, extrae el texto plano y reemplaza todo ese HTML por un bloque limpio y consistente.
Resultado: código legible, sin dependencias ni estilos rotos.
2. Bloques <pre><code> nativos
Cuando el contenido se escribe correctamente desde el editor de código de TinyMCE, por ejemplo:
toolbar_mode: 'wrap'
});</code></pre>
El script los detecta automáticamente y les aplica el mismo formato visual que al resto.
Esto garantiza consistencia total independientemente del origen del código.
3. <code> inline inteligente
No todo el código debe ocupar un bloque completo.
El sistema diferencia entre:
- Código corto → se mantiene inline
- Código largo (+80 caracteres) o con patrones técnicos → se convierte automáticamente en bloque
Esto evita que párrafos largos con código queden ilegibles.
Detección automática de lenguaje
Sin usar librerías de highlighting, el script implementa una detección básica basada en patrones.
| Patrón detectado | Lenguaje |
|---|---|
<?php, namespace, function ...$ |
PHP |
tinymce.init, addEventListener, const, => |
JavaScript |
property: value; sin funciones |
CSS |
| Tags HTML de apertura/cierre | HTML |
SELECT, INSERT, CREATE |
SQL |
apt, npm, php, git, curl |
Bash |
def, import, print( |
Python |
No es perfecto, pero cubre la mayoría de casos reales en un blog técnico.
El CSS
El estilo busca ser limpio, moderno y legible:
.post-content code:not(pre code) {
background: #f3f4f6;
color: #e11d48;
padding: 2px 6px;
border-radius: 4px;
font-size: 0.88em;
font-family: 'SFMono-Regular', Consolas, monospace;
}
/* Code block container */
.code-block {
background: #1e1e2e;
border-radius: 8px;
margin: 1.5rem 0;
overflow: hidden;
}
.code-block-header {
display: flex;
justify-content: space-between;
padding: 8px 16px;
background: #313244;
color: #a6adc8;
font-size: 0.78rem;
}
.code-block pre code {
color: #cdd6f4;
font-family: 'SFMono-Regular', Consolas, monospace;
}
Botón “Copiar”
Cada bloque incluye un botón de copia que utiliza la API nativa:
Comportamiento:
- Al hacer clic → copia el código
- Cambia el texto a “Copiado”
- Muestra un check verde
- Vuelve al estado original tras 1.5 segundos
Sin dependencias, sin complicaciones.
Cómo usarlo al escribir posts
Si pegas desde ChatGPT
No tienes que hacer nada. El sistema limpia y formatea automáticamente.
Si escribes código en TinyMCE
- Pulsa el botón
<>(código fuente) - Envuelve el contenido así:
Para código inline
- Selecciona el texto
- Usa el formato monospace en la toolbar
Se renderizará automáticamente con fondo gris y estilo inline.
Conclusión
Este enfoque demuestra que no siempre necesitas librerías pesadas para resolver problemas comunes.
Con unas pocas líneas de JavaScript bien pensadas y algo de CSS:
- Se normaliza cualquier fuente de código
- Se mejora la legibilidad
- Se mantiene el control total del frontend
Y lo más importante: el contenido técnico del blog se ve siempre consistente, venga de donde venga.
