Gabrilov

Markdown enriquecido con MDX

· Actualizado el

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.

Imágenes con ancho controlado y pie de foto

Markdown solo sabe insertar una imagen a ancho completo (![alt](ruta)). Con un componente MDX, en cambio, puedo decidir cuánto ocupa respecto al texto y añadirle un pie:

Primer plano de una guitarra
Una guitarra, a la mitad del ancho del texto.

Por debajo del componente hay solo un <figure> con una variable CSS para el ancho y un <Image> de astro:assets (la misma pieza que optimiza heroImage), así que la imagen sigue pasando por el pipeline de build de Astro en vez de quedar como un <img> sin procesar.

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.

Comentarios