Markdown enriquecido con MDX

28 de junio de 2026

Hasta ahora los posts eran Markdown puro: texto, listas, enlaces. Suficiente para escribir, pero sin forma de insertar piezas interactivas o cajas con estilo propio. Este post está escrito en MDX, que es Markdown con un superpoder: puedo importar y usar componentes .astro dentro del contenido.

Fíjate en la línea import justo bajo el frontmatter: importa el componente y a partir de ahí lo uso como una etiqueta más:

¿Por qué MDX y no Markdown a secas?

Markdown brilla por su simplicidad, pero es cerrado: solo conoce sus propios elementos. Cuando un post necesita algo que no existe en Markdown —un aviso destacado, un gráfico, un demo interactivo— MDX deja meter un componente sin romper el flujo de escritura.

Resaltado de código con Shiki

Los bloques de código se resaltan con Shiki, integrado en Astro. Ocurre en build: el HTML ya llega coloreado y no se envía ningún resaltador JS al navegador. Basta con indicar el lenguaje tras las comillas:

// Un getStaticPaths como el del Hito 2c, ahora con resaltado.
export async function getStaticPaths() {
  const posts = await getCollection("blog", ({ data }) => !data.draft);
  return posts.map((post) => ({
    params: { slug: post.id },
    props: { post },
  }));
}

Y también funciona inline o con otros lenguajes, por ejemplo CSS:

.callout {
  border-inline-start: 4px solid var(--color-border);
  background-color: color-mix(in srgb, var(--color-accent) 6%, transparent);
}

Como el blog tiene tema claro/oscuro, Shiki está configurado con doble tema: emite los colores como variables CSS y elegimos cuál aplicar según prefers-color-scheme. Cambia el tema de tu sistema y el código cambia con él.