展示

Markdown Renderer

通用 Markdown 渲染器：内置 Blog / Chat 两套预设，支持 GFM、标题锚点、代码块高亮、Mermaid 图表、图片预览、安全链接策略与可扩展 Widget 运行时。

markdowngfmcontentblogchatmermaidcode-blockwidgetrenderersecurity

快速预览

查看 Markdown Renderer 组件的基本效果

MarkdownRenderer

支持 GFM、inline code、表格和代码块。

场景	预设
长文	Blog
会话	Chat

demo.tsx

export function Demo() {
  return <MarkdownRenderer content={content} />;
}

基本用法

使用 Markdown Renderer 组件的基础示例

导入组件

1import { MarkdownRenderer } from "@/components/qiuye-ui/markdown-renderer";

使用组件

1const content = `# MarkdownRenderer
2
3支持 **GFM**、表格、代码块、Mermaid 和图片预览。
4
5```tsx title="hello.tsx" {2}
6export function Hello() {
7  return <span>Hello QiuYe UI</span>;
8}
9```
10`;
11
12return <MarkdownRenderer content={content} />;

组件演示

查看组件的各种使用方式和效果

主题

BlogMarkdownRenderer

trustedarticle

面向长文内容，启用标题锚点、Mermaid 预览和图片查看器。

文章预设

这是一段来自 QiuYe UI 的 Markdown 内容，支持 inline code、GFM 表格、标题锚点、代码块标题与行高亮。

能力清单

GFM 表格和列表
CodeBlock 高亮与复制
图片预览与 Mermaid 图表
可插拔 Widget 运行时

表格

能力	默认策略	适用场景
Blog	trusted + article density	长文、文档、知识库
Chat	untrusted + compact density	AI 会话、流式回复

代码块

hello.tsx

export function HelloCard() {
  return (
    <section className="rounded-lg border p-4">
      <h2>Hello Markdown</h2>
      <p>Rendered by QiuYe UI.</p>
    </section>
  );
}

Mermaid

加载中...

Blog 预设默认允许原始 HTML，更适合可信内容源。