MarkdownView Markdown

Usage

Use content as the single source string. marked is configured with GFM and soft line breaks enabled.

Best Practices

• Keep sanitize enabled for user-generated, remote, or plugin-provided content.
• Prefer short, already-normalized Markdown strings; do not pass partially escaped HTML unless you intentionally rely on Markdown HTML support.
• Set theme explicitly inside previews, cards, or split light/dark comparisons where the surrounding page theme is not representative.
• Use TxMarkdownView for display-only content. Pair it with an editor or textarea outside the component when users need to edit Markdown.

API Reference

Props

Slots

No slots. The rendered HTML is fully derived from content.

Events

No component events.

Rich Markdown

Tables, task lists, blockquotes, inline code, and fenced code blocks are rendered into the internal .markdown-body container.

Theme Preview

Set theme explicitly when the surrounding surface is known. Leave it as auto when the page owns the theme state.

Overview

• Markdown is parsed with marked using gfm: true and breaks: true.
• With sanitize=true, raw generated HTML is never rendered before DOMPurify resolves.
• With sanitize=false, marked output is written directly with v-html; only use this for trusted Markdown.
• theme="auto" checks html / body data-theme and light / dark classes, then observes html class and data-theme changes.
• The public wrapper receives class="light" or class="dark" and a matching data-theme attribute.
• The bundled GitHub-Markdown stylesheet is a global import, so every rule in it is scoped to :where(.tx-markdown-view, .tx-stream-md). .markdown-body is a very generic class name — before the scope, importing this component restyled any host page that used it for its own prose. :where() adds no specificity, so the scope confines the sheet without changing how its rules compete with each other.

Technologies

• Security note: sanitize=true waits for DOMPurify and renders an empty body if the sanitizer import fails. Do not disable sanitization for plugin, remote, or user-authored Markdown unless it has already been trusted and normalized upstream.
• Theme note: theme="auto" reads both html and body theme markers initially, but the mutation observer watches only html class and data-theme changes. Prefer explicit theme for embedded previews that do not follow the document root.
• Verified coverage: markdown-view.test.ts checks sanitizer withholding, sanitized rendering, raw rendering when sanitize=false, explicit light/dark themes, auto-theme resolution from document markers, observer updates, and light fallback.
• Component source: packages/tuffex/packages/components/src/markdown-view/src/TxMarkdownView.vue.
• Types: packages/tuffex/packages/components/src/markdown-view/src/types.ts exports MarkdownViewProps.
• Styles: packages/tuffex/packages/components/src/markdown-view/src/github-markdown.css is imported by the component stylesheet, and TxStreamMarkdown imports the same file. Every rule in it is scoped to :where(.tx-markdown-view, .tx-stream-md) — keep the scope if you re-vendor it.
• Export alias: packages/tuffex/packages/components/src/markdown-view/index.ts exports MarkdownView, TxMarkdownView, MarkdownViewProps, and TxMarkdownViewInstance.
• Coverage: packages/tuffex/packages/components/src/markdown-view/__tests__/markdown-view.test.ts verifies sanitization and theme behavior.