~/ctrl-z blog

Expressive Code: bloques de código con superpoderes

Marcos de editor, resaltado de líneas, diffs y botón de copiar: todo lo que Expressive Code añade a tus bloques de código en Astro.

Si escribes sobre código, los bloques de código son tu contenido. Expressive Code los convierte en pequeñas ventanas de editor con resaltado profesional, sin JavaScript adicional para el lector.

Marcos de editor y terminal

Añade title y el bloque gana una pestaña de editor:

src/utils/slugify.ts
export function slugify(text: string): string {
  return text
    .normalize('NFD')
    .replace(/[̀-ͯ]/g, '')
    .toLowerCase()
    .replace(/[^a-z0-9]+/g, '-')
    .replace(/(^-|-$)/g, '');
}

Los lenguajes de shell se renderizan como terminal automáticamente:

Terminal window
npm run new -- "Mi nueva entrada"
git add . && git commit -m "post: mi nueva entrada"
git push

Resaltado de líneas

Marca líneas relevantes con {n-m} o resalta texto con "cadena":

const button = document.querySelector('#copy');


button.addEventListener('click', async () => {
  await navigator.clipboard.writeText(code.textContent);
});


console.log('listo');

Diffs que se entienden

Con lang="diff" o los marcadores ins/del puedes mostrar cambios:

content.config.ts
const blog = defineCollection({
  schema: z.object({ title: z.string() }),
  schema: z.object({ title: z.string().max(120) }),
});

Sin coste para el lector

Todo el resaltado ocurre en el build: el HTML llega ya coloreado. El único JavaScript es el del botón de copiar, que Expressive Code emite como un módulo externo diminuto, compatible con una CSP estricta.

¿El resultado? Bloques de código bonitos, accesibles y rápidos. Exactamente lo que un blog de desarrollo necesita.