MarkdownView Markdown

TxMarkdownView renders GitHub-flavored Markdown through marked. Sanitization is enabled by default and the component withholds generated HTML until DOMPurify is ready; set sanitize=false only for trusted content.

import { ref } from 'vue' const content = ref( '# Title\n\n- item 1\n- item 2\n\n`inline code`\n\n```ts\nconst a = 1\n```\n\n> Quote', ) const richContent = ref( [ '# Heading 1', '## Heading 2', '', 'This is **bold**, *italic*, ~~strikethrough~~, and a [link](https://github.com).', '', '- Unordered item', ' - Nested item', '- [x] Task done', '- [ ] Task todo', '', '1. First ordered', '2. Second ordered', '', '> Blockquote with multiple lines', '>', '> - Quote item', '> - Another item', '', '---', '', '| Feature | Value |', '| --- | --- |', '| Table | Supported |', '| Inline code | `const a = 1` |', '', '```ts', 'export const sum = (a: number, b: number) => a + b', '```', ].join('\n'), )

Basic Usage

MarkdownView

Demo will load when visible.

<template>
  <TxMarkdownView :content="content" />
</template>

Render Examples

Common Markdown Structures

Demo will load when visible.

<template>
  <TxMarkdownView :content="richContent" />
</template>

Theme Preview

Light / Dark

Demo will load when visible.

<template>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; width: 100%;">
  <div style="padding: 12px; border-radius: 12px; border: 1px solid #d1d9e0; background: #ffffff;">
    <TxMarkdownView :content="richContent" theme="light" />
  </div>
  <div style="padding: 12px; border-radius: 12px; border: 1px solid #30363d; background: #0d1117;">
    <TxMarkdownView :content="richContent" theme="dark" />
  </div>
</div>
</template>

API

Props

Prop	Type	Default	Description
`content`	`string`	-	Markdown source rendered into the `.markdown-body` container.
`sanitize`	`boolean`	`true`	Sanitizes generated HTML with DOMPurify before rendering; when disabled, raw HTML from Markdown is allowed.
`theme`	`'auto' \| 'light' \| 'dark'`	`'auto'`	`auto` follows document `data-theme` / theme classes and falls back to light.