MarkdownRenderer

MarkdownRenderer 渲染助手消息中的 Markdown 内容。

导入方式

按需导入

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

注意事项

默认会转义 HTML。若业务允许 HTML，需要自行评估 XSS 风险。