处理 LLM 流式返回的 Markdown：语法补全和缓存、动画以及尾缀。

代码示例

API

streaming

streaming 接受布尔值或对象。传布尔值即预设：true 表示流式进行中，等同 hasNextChunk: true 并打开 incremental、incompleteMarkdown: 'complete'、typewriter；false 表示流已结束，按最终内容渲染。把应用里现成的 isStreaming 直接传进来即可：<XMarkdown content={content} streaming={isStreaming} />。传对象则逐项控制，对象形式的行为和默认值没有变化。

incremental 只在顶格的 ATX 标题前切分；围栏代码、HTML 块（<div>、<pre>、<script>、注释等）、$$ 公式里的 # 行不算标题。文档里出现链接引用定义或脚注定义、或自定义组件标签跨越切点时不切分。各段渲染在同一个根节点里，DOM 与整篇一次渲染完全一致。

TypewriterConfig

放出的永远是 content 的前缀，且不会切在一个 emoji（含 👨‍👩‍👧‍👦、🇨🇳、👍🏽、❤️ 这类多码点序列）或带变音符号的字符中间；hasNextChunk 变为 false 时立即放完。

TailConfig

AnimationConfig

尾部默认显示 ▋。可通过 content 自定义字符，或通过 component 传入自定义 React 组件实现动画、延迟显示等效果。

tsx

// 自定义尾部组件示例
const DelayedTail: React.FC<{ content?: string }> = ({ content }) => {
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    const timer = setTimeout(() => setVisible(true), 2000);
    return () => clearTimeout(timer);
  }, []);

  if (!visible) return null;
  return <span className="my-tail">{content}</span>;
};

debug

⚠️ debug 仅限开发环境使用，生产环境请关闭以避免性能开销与信息泄露。

支持的不完整语法

最小配置示例

<XMarkdown
  content={content}
  streaming={{
    hasNextChunk,
    enableAnimation: true,
    tail: true,
    incompleteMarkdownComponentMap: {
      link: 'link-loading',
      table: 'table-loading',
    },
  }}
  components={{
    'link-loading': LinkSkeleton,
    'table-loading': TableSkeleton,
  }}
/>

自定义组件的重渲染

每次解析都会给自定义组件传一个新的 domNode，所以直接套 React.memo 在流式期间永远比不相等：一个代码高亮组件会随每个 chunk 重新高亮，哪怕它显示的内容没变。用 arePropsEqualIgnoringDomNode 作比较函数即可，它忽略 domNode、浅比较其余 props：

import XMarkdown, { arePropsEqualIgnoringDomNode, type ComponentProps } from '@ant-design/x-markdown';

const Code = React.memo(
  (props: ComponentProps) => <CodeHighlighter lang={props.lang}>{String(props.children)}</CodeHighlighter>,
  arePropsEqualIgnoringDomNode,
);
// 在组件外部固定：行内字面量每次渲染都是新对象
const components = { code: Code };

<XMarkdown content={content} streaming={isStreaming} components={components} />;

对 children 是元素数组的容器型组件（如 table）它不起作用，这类组件由 incremental 覆盖。components、config、streaming 等对象请在组件外部固定或用 useMemo 缓存，行内字面量会让每次渲染都重建解析器。

FAQ

hasNextChunk 可以一直是 true 吗？

不建议。最后一个 chunk 到达后应切换为 false，否则未完成语法会持续停留在占位状态。用布尔形式时把 isStreaming 直接传给 streaming 就不会漏。