MarkdownRenderer Markdown 渲染器

将 Markdown 文本渲染为 HTML，适用于 AI 输出内容的展示。

基础用法

支持标题、粗体、斜体、链接、列表、行内代码、代码块、引用等。

Hello AI

This is a Markdown renderer component.

Features

• Supports italic and bold


• Inline code and code blocks


• Links: Example

This is a blockquote

const greeting = "Hello, World!"
console.log(greeting)

<script setup>
import MarkdownRenderer from '@/vue/components/MarkdownRenderer.vue'

const content = `# Hello AI

This is a **Markdown** renderer component.

## Features

- Supports *italic* and **bold**
- Inline \`code\` and code blocks
- Links: [Example](https://example.com)

> This is a blockquote

\`\`\`javascript
const greeting = "Hello, World!"
console.log(greeting)
\`\`\`
`
</script>
<template>
  <div style="padding: 16px; border: 1px solid var(--vk-border-color); border-radius: 4px;">
    <MarkdownRenderer :content="content" />
  </div>
</template>

React 用法

import { MarkdownRenderer } from '@bobocn/element/react'
import '@bobocn/element/style.css'

const content = `# Hello

This is **bold** and *italic*.

\`\`\`javascript
console.log('hi')
\`\`\`
`

function App() {
  return <MarkdownRenderer content={content} />
}

API

属性 (Attributes)

属性名	说明	类型	默认值
content	Markdown 源文本	string	''
breaks	换行转 <br>	boolean	true

安全说明

组件会转义 HTML，并只允许安全的链接 / 图片 URL 协议，避免 AI 输出内容直接注入危险脚本。