Design System · Markdown

Markdown Rendering Components

The pipeline that turns parseMarkdown() output (an MDAST tree from @lossless-group/lfm) into rendered HTML. Canonical sources live in packages/lfm-astro/components/; sites copy them in and adapt as needed.

Mode

Theme

Kitchen-sink demo · 20+ node types.

AstroMarkdown

Recursive MDAST → Astro/JSX renderer. The dispatcher: every node type (paragraph, heading, list, link, code, table, footnoteReference, containerDirective, etc.) routes here first, then defers to a specialized component for callouts, code blocks, images, and citations.

packages/lfm-astro/components/AstroMarkdown.astro

CSS contract: (structural — no direct CSS; defers all styling to the page-level body class and to the specialized components below)

View demo →

10 types · aliases · info hero · 3 modes.

Callout

Renders LFM/remark-callouts blocks (`> [!type] Title`). Three-file split: structural component + types registry + mode-aware stylesheet. Every type obeys the light/dark/vibrant mode contract.

packages/lfm-astro/components/Callout.astro

CSS contract: --callout-accent (set per-type, mode-overridden), --color-text, --fx-glow-opacity, --fx-glow-spread (used by `info` hero variant)

View demo →

Demo TBD.

CodeBlock

Fenced-code renderer with Shiki syntax highlighting. Receives a `code` MDAST node (lang + value). Used for inline code samples in long-form content.

packages/lfm-astro/components/CodeBlock.astro

CSS contract: --color-surface, --color-border, --font-code

Demo TBD.

MarkdownImage

Renders `:::image{src=… alt=…}` directive blocks with caption support. Distinct from inline `![alt](src)` images, which go through AstroMarkdown directly.

packages/lfm-astro/components/MarkdownImage.astro

CSS contract: --color-text-muted, --color-border

Renders inside MarkdownReader.

Sources

Citation list at the bottom of a long-form page. Receives `tree.data.citations.ordered` from `parseMarkdown()`. Renders sequentially-numbered footnote anchors that pair with `footnoteReference` superscripts inside the body.

packages/lfm-astro/components/Sources.astro

CSS contract: --color-text, --color-text-muted, --color-primary, --color-border

Renamed from ProjectReader · generic.

MarkdownReader

Generic LFM-rendered reading column. Wraps an MDAST tree in a 70ch column with prose styling. Used by `/projects/[slug]/` and `/working-groups/[slug]/`.

sites/{site}/src/components/markdown/MarkdownReader.astro

CSS contract: --color-text, --color-text-muted, --color-primary, --color-surface, --color-border, --font-display, --font-body, --font-code

View demo →