#MarkdownRenderer - 流式 Markdown 渲染器

MarkdownRenderer 是轻量只读 Markdown 渲染组件，面向 LLM 流式输出。相比 MarkdownEditor 只读模式，无 Slate 依赖，体积更小、首屏更快；内置 GPT 风格逐词淡入，并支持图表 / 思维链 / 工具调用 / 文件预览 / Mermaid / 公式等代码块扩展。

#何时使用

• 聊天 / Agent 场景渲染 LLM 的 Markdown 输出
• 内容流式追加（streaming + 持续更新 content），需要 GPT 风格逐词淡入
• 将代码块语言扩展为图表、Mermaid、文件树、工具调用、Schema 等业务渲染器
• 不需要编辑能力，希望尽可能轻量

如需可编辑能力（评论、富文本、表格 inline 编辑等），请使用 MarkdownEditor。

#代码演示

#API Playground

#流式与逐词淡入

streaming={true} 时默认开启 GPT 风格逐词淡入：新词各自淡入一次，已显示内容复用 DOM、不闪烁；纯 CSS 驱动，尊重 prefers-reduced-motion。代码块、表格、公式不参与拆词。关闭方式：

<MarkdownRenderer
  content={content}
  streaming
  throttleOptions={{ fade: false }}
/>

限流与淡入相互独立：throttleOptions.enabled: false 时内容即时渲染，fade 仍可单独控制。

isFinished={true} 会立即展示剩余正文并退出流式状态，即使 streaming 仍为 true。结束后移除内部逐词动画节点，保留媒体、图表等已有组件的状态。

流式追加会复用未变块的 React 元素与解析结果，普通正文只重新切分末尾窗口；脚注保留定义上下文并增量解析尾部，新增全局定义或正文修订时重新校验。代码块、表格分别订阅自身配置，更新表格预览配置不会刷新代码块。自定义解析插件数组建议保持引用稳定，实际插件变更会重建解析器并重新解析。

#Mark 标签颜色与 Label

#快速上手

#静态 Markdown

import { MarkdownRenderer } from '@ant-design/agentic-ui';
import React from 'react';

export default () => (
  <MarkdownRenderer
    content={`# Hello\n\n这是 **Markdown** 内容。\n\n- 支持列表\n- 支持 \`代码\`\n\n\`\`\`ts\nconst answer = 42;\n\`\`\``}
  />
);

#流式渲染

import { MarkdownRenderer } from '@ant-design/agentic-ui';
import React, { useEffect, useState } from 'react';

const FULL = '# 流式输出\n\n智能体正在思考，逐字给出答案……';

export default () => {
  const [content, setContent] = useState('');
  const [done, setDone] = useState(false);

  useEffect(() => {
    let i = 0;
    const timer = setInterval(() => {
      i += 3;
      setContent(FULL.slice(0, i));
      if (i >= FULL.length) {
        setDone(true);
        clearInterval(timer);
      }
    }, 60);
    return () => clearInterval(timer);
  }, []);

  return (
    <MarkdownRenderer
      content={content}
      streaming={!done}
      isFinished={done}
      // 逐词淡入默认开启；传 throttleOptions={{ fade: false }} 可关闭
    />
  );
};

在 Bubble 中经 markdownRenderConfig 透传即可：

<BubbleList
  markdownRenderConfig={{
    renderMode: 'markdown',
    throttleOptions: { fade: false }, // 可选：关闭淡入
  }}
/>

#自定义代码块渲染

通过 plugins[].renderer.rendererComponents 注册渲染器，键名对应代码块 language。内置语言（mermaid、chart、schema 等）的同名键会优先覆盖默认渲染。

import { MarkdownRenderer } from '@ant-design/agentic-ui';
import React from 'react';

export default () => (
  <MarkdownRenderer
    content={'```mermaid\ngraph TD;\nA-->B;\n```'}
    plugins={[
      {
        renderer: {
          rendererComponents: {
            // 键名是 language；props.language 与 props.children 会透传
            mermaid: ({ language, children }) => (
              <pre>自定义 {language} 渲染</pre>
            ),
          },
        },
      },
    ]}
  />
);

MarkdownEditorPlugin.elements 仅用于 Slate 编辑器；MarkdownRenderer 只读 plugin.renderer.rendererComponents。

完整示例见 OfficeViewer - Markdown 中渲染卡片：Word / Excel 渲染为文件卡片、PPTX 卡片内展示幻灯片缩略图列表，点击打开详情预览。

#API

#MarkdownRendererProps

#MarkdownRendererTableConfig

<MarkdownRenderer
  content={markdown}
  tableConfig={{ actions: { fullScreen: 'modal' } }}
/>

表格操作在悬停或聚焦后挂载，预览正文在打开后挂载，关闭后释放。视频与音频默认 preload="none"，自动播放时加载元数据；HTML 中显式指定的 preload 优先。

#MarkdownRendererRef

#ContentThrottleOptions

控制流式内容按帧推进的节奏，并统一承载逐词淡入开关。

#MarkdownToHtmlConfig

#FileMapConfig

#内置代码块渲染器

按代码块 language 路由；业务可直接书写带语言标记的代码块触发：

上述渲染器均由 MarkdownRenderer 顶层导出，可在自定义流水线中独立复用。

#相关 Hook 与工具

#注意事项

1. isFinished vs streaming：流式过程保持 streaming={true}；结束时将 isFinished 置 true 会立即展示剩余字符并退出流式状态。未设置结束标记时，限流器也会按 charsPerFrame 自然推完，但仍保留流式展示模式。
2. throttleOptions.fade：仅 streaming={true} 时生效，默认开启；仅显式 fade: false 关闭。代码块、表格、公式不参与拆词。Slate 模式（默认 renderMode: 'slate'）无逐词淡入。
3. linkConfig.onClick：返回 false 可阻止默认跳转。
4. eleRender：返回 undefined / null 回退默认 DOM；只有显式返回 React 节点才会覆盖。