Markdown

Renders Markdown source as styled HTML. Built on marked for parsing and DOMPurify for sanitization, then handed to aurora's Prose for typography. Use this whenever you have Markdown text that needs to render as rich content — release notes, CMS fields, in-app help, anything that would otherwise need a custom Vue renderer.

For static prose composed in templates, use Tailwind utilities or <Prose> directly. Use <Markdown> only when the source is a Markdown string at runtime.

Basic

<Markdown :content="sourceString" />

Smaller body

size is forwarded to the underlying Prose. Use 'sm' for tighter rhythm in side panels, modals, and dense lists.

<Markdown :content="sourceString" size="sm" />

External links in a new tab

By default, every link opens in the same tab (whatever the Markdown source says). Pass open-links-in-new-tab to automatically open external links in a new tab with rel="noopener noreferrer". Internal links (same hostname) open normally.

<Markdown :content="content" open-links-in-new-tab />

The component compares the link's hostname against window.location.hostname to decide.

Sanitization

Output is sanitized via DOMPurify before being injected — the component is safe to use with user-generated content. Custom HTML in the source is allowed but stripped of script tags, event handlers, and other XSS vectors.

When open-links-in-new-tab is enabled, target and rel are added to DOMPurify's allowed-attribute list so the rewritten links survive sanitization.

Props

Prop	Type	Default	Description
content	string	''	Markdown source. Empty string renders nothing.
size	'md' | 'sm'	'md'	Forwarded to the underlying Prose for body sizing.
openLinksInNewTab	boolean	false	Open external links in a new tab with rel="noopener noreferrer". Internal links (same hostname) are unaffected.

Compared to Prose

Markdown and Prose look similar but solve different problems:

Component	Input	Use when
Markdown	A Markdown string	Source is text the user / a CMS / a config file authored in Markdown
Prose	Slot content (HTML/Vue)	Source is already HTML, or Vue templates you compose at write-time

Internally, Markdown parses → sanitizes → renders inside a Prose wrapper. Same typography either way.