← Volver a todas las Posts

Integrando Comark con Astro

comark astro integration

Cómo funciona

En lugar de usar el pipeline remark/rehype integrado de Astro, usamos la API agnóstica de framework de Comark:

  1. Define las colecciones — Usa el loader glob() para cargar archivos .md con frontmatter validado con Zod
  2. Obtén el cuerpo — Accede al Markdown en bruto mediante entry.body
  3. Parsea con Comark — Llama a parse() para construir el AST
  4. Renderiza a HTML — Llama a renderHTML() con renderizadores de componentes personalizados
import { parse } from 'comark'
import { renderHTML } from '@comark/html'

const tree = await parse(entry.body)
const html = await renderHTML(tree, {
  components: {
    alert: ([tag, attrs, ...children], { render }) => {
      return `<div class="alert">${render(children)}</div>`
    },
  },
})
::alert{type="info"}
Since Astro components run on the server, Comark's parse() and renderHTML() are called at build time — zero JavaScript is sent to the client.
::

Componentes personalizados

Puedes registrar tantos componentes personalizados como quieras. Cada uno recibe el elemento del AST de Comark y un helper render para procesar los hijos:

const badge: ComponentRenderFn = ([tag, attrs, ...children], { render }) => {
  const color = attrs.color || 'blue'
  return `<span class="badge badge-${color}">${render(children)}</span>`
}

Esto hace muy sencillo extender tu Markdown con componentes reutilizables y con estilo propio.

title: Integrando Comark con Astro description: Cómo funciona por dentro la integración de Comark + Astro. pubDate: 2026-01-10 tags: comark, astro, integration

Este ejemplo usa las colecciones de contenido de Astro con Comark como renderizador de Markdown.

Cómo funciona

En lugar de usar el pipeline remark/rehype integrado de Astro, usamos la API agnóstica de framework de Comark:

  1. Define las colecciones — Usa el loader glob() para cargar archivos .md con frontmatter validado con Zod
  2. Obtén el cuerpo — Accede al Markdown en bruto mediante entry.body
  3. Parsea con Comark — Llama a parse() para construir el AST
  4. Renderiza a HTML — Llama a renderHTML() con renderizadores de componentes personalizados
import { parse } from 'comark'
import { renderHTML } from '@comark/html'

const tree = await parse(entry.body)
const html = await renderHTML(tree, {
  components: {
    alert: ([tag, attrs, ...children], { render }) => {
      return `<div class="alert">${render(children)}</div>`
    },
  },
})

Componentes personalizados

Puedes registrar tantos componentes personalizados como quieras. Cada uno recibe el elemento del AST de Comark y un helper render para procesar los hijos:

const badge: ComponentRenderFn = ([tag, attrs, ...children], { render }) => {
  const color = attrs.color || 'blue'
  return `<span class="badge badge-${color}">${render(children)}</span>`
}

Esto hace muy sencillo extender tu Markdown con componentes reutilizables y con estilo propio.