MarkdownView Markdown

Usage

content is the only input, parsed as GFM.

Loading demo...

Loading demo...

theme pins light or dark; auto follows the document theme.

Loading demo...

Keep sanitize on for user-generated, remote, or plugin-provided content.
Pass normalized Markdown; don't mix in partially escaped HTML unless you rely on Markdown HTML on purpose.
Set theme explicitly on previews and cards that don't follow the document theme.
Use it for display only; pair it with an editor or textarea outside when users edit.

Prop	Type	Default	Description
`content`	`string`	required	Markdown source string.
`sanitize`	`boolean`	`true`	Cleans the output with DOMPurify; nothing renders until it loads.
`theme`	`'auto' \| 'light' \| 'dark'`	`'auto'`	`auto` resolves from the document's `data-theme` or theme classes, falling back to `light`.

Parses with marked using gfm and breaks (a single newline breaks the line).
With sanitize=true, nothing renders before DOMPurify is ready; if its import fails, the body stays empty.
With sanitize=false, the output goes straight into v-html; use it only for trusted content.
theme="auto" reads and observes data-theme and the light / dark classes on both html and body.
The wrapper carries the resolved light / dark class and a matching data-theme.

The bundled github-markdown.css is a global import shared with TxStreamMarkdown; every rule is scoped to :where(.tx-markdown-view, .tx-stream-md), so a host's own .markdown-body is untouched. Keep the scope when re-vendoring it.
Source: packages/tuffex/packages/components/src/markdown-view/.

packages/tuffex/packages/components/src/markdown-view/index.ts