MarkdownView Markdown 渲染

用于将 Markdown 渲染为 HTML（默认开启 sanitize）。

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'), )

基础用法

MarkdownView

示例即将加载...

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

渲染示例

常见 Markdown 结构

示例即将加载...

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

主题预览

Light / Dark

示例即将加载...

<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

属性名	类型	默认值	说明
`content`	`string`	必填	Markdown 内容
`sanitize`	`boolean`	`true`	是否 sanitize（默认开启）
`theme`	`auto \| light \| dark`	`auto`	主题模式（auto 跟随外部主题 data-theme/class，未标记时默认 light）