MarkdownRenderer

MarkdownRenderer 使用 marked 渲染助手消息中的 Markdown 内容，并通过 DOMPurify 净化输出。

导入方式

按需导入

import { MarkdownRenderer } from '@weimin96/ai-chat-vue'
import '@weimin96/ai-chat-vue/styles'

完整导入

import * as AiChatVue from '@weimin96/ai-chat-vue'
import '@weimin96/ai-chat-vue/styles'

app.use(AiChatVue)

// 模板中可直接使用 <MarkdownRenderer />

基础用法

Markdown 示例

• 支持列表
• 支持 加粗
• 支持 inline code

const message = 'hello'

<script setup lang="ts">
import { MarkdownRenderer } from '@weimin96/ai-chat-vue'

const content = `# Markdown 示例

- 支持列表
- 支持 **加粗**
- 支持 \`inline code\`

\`\`\`ts
const message = 'hello'
\`\`\`
`
</script>

<template>
  <div class="docs-narrow">
    <MarkdownRenderer :content="content" />
  </div>
</template>

API

属性	类型	默认值	说明
content	string	必填	Markdown 文本
isStreaming	boolean	false	是否处于流式输出
allowHtml	boolean	false	是否允许 HTML
debounceMs	number	50	流式期间解析合并间隔

注意事项

默认会转义原始 HTML，并过滤危险链接协议。若业务允许 HTML，需要自行评估 XSS 风险。

当 isStreaming=true 时，组件会按 debounceMs 合并多次内容更新，减少高频 token 到来时的 Markdown 解析次数。流式结束或 isStreaming=false 时会立即解析当前完整内容。需要逐 token 调试时可将 debounceMs 设为 0。