Markdown elements

A complete demonstration of every block and inline element the renderer supports. Open this page in edit mode and compare with view mode — both surfaces consume the same --vf-h* / .prose recipe, so the visual rhythm should match exactly.

Headings

H1 — page-title scale (--vf-h1 · 30px · semibold)

H2 — section heading (--vf-h2 · 24px · medium)

H3 — sub-section (--vf-h3 · 20px · medium)

H4 — card-title scale (--vf-h4 · 16px · medium)

H5 — small heading (--vf-h5 · 14px · semibold)

H6 — micro heading (--vf-h6 · 12px · semibold, muted)

Paragraphs and inline marks

A regular paragraph reads at body size with --leading-relaxed line-height. Inline marks include bold, italic, bold italic, strikethrough, inline code, a link to the home page, and a link with title. Use them as needed.

You can also break a line
with two trailing spaces — the renderer treats that as a soft line break.

Blockquote

A blockquote sits inside a muted left bar with italic body text. It can span multiple lines and keep the same indent.

Nested quotes are supported too, with progressively deeper bars.

Unordered list

• First item — bullet rendered as • in both editor and prose
• Second item with inline emphasis and code
  • Nested sub-bullet at depth 2
  • Another sub-bullet
• Third item

Ordered list

1. Step one
2. Step two
   1. Sub-step a
   2. Sub-step b
3. Step three

Task list

• An unchecked task
• A completed task
• Another open task

Code block

// Inline syntax highlighting via shiki (server-side at save time).
import { renderAtSave } from "@vegastack/renderer";

export function renderPage(source: string) {
  return renderAtSave({ sourceType: "markdown", source });
}

pnpm install
pnpm dev

Table

Columns can be aligned with :-- (left), :-: (center), and --: (right); the alignment survives a round-trip through the editor.

Horizontal rule

The rule below separates two regions with a single hairline border.

Images

Images are small and left-aligned by default. Append a width preset — small (default), medium, large, or full — to size one up:

Multi-column layout

Place blocks side by side. Each :::column is a cell; the row stacks vertically on narrow screens.

Callouts

Admonition boxes in five kinds: note, tip, important, warning, and caution.

Footnotes

Standard markdown footnotes are preserved on edit. Reference a note inline¹ and define it anywhere in the document.

Reference links

Reference-style links are normalized to inline form on edit (the target URL is never lost): a link like the docs resolves to its definition.

Definition-style block

A description-list pattern (not native markdown but supported via the renderer's dl passthrough):

Term one : Definition for term one. Multiple lines are allowed.

Term two : Definition for term two.

Mixed nested example

A quote with embedded list and code:

• First quoted bullet
• Second quoted bullet with inline code

ts

// code block inside a quote
const value = 42;

Verification checklist

• Editor # headings render at the same pixel size as the rendered view.
• Bullets show as • in both surfaces, not * or -.
• Inline code uses the muted background and rounded corners.
• Code blocks span full width with a single rounded background.
• Blockquote left bar uses --border, italic body uses --muted-foreground.
• Table borders use --border; headers use --foreground.
• tracking-tight on H1, progressively relaxed toward H4.
• No 1px focus ring around the editor when typing.