如何优雅的在AI应用中渲染Markdown数据

在开发 AI 聊天应用时，你是否遇到过这样的需求：

需要像 DeepSeek、ChatGPT 那样的流畅打字动画效果
后端流式推送数据，可能一次多个字，打字会有突然打多个字
非流式数据也要假装有流式的打字效果
需要同时支持 Markdown 渲染和数学公式显示
希望能区分"思考中"和"回答中"两种状态
...

ds-markdown 就是为了解决这些痛点而生的 React 组件！

📖 在线演示
🔧 StackBlitz 体验

✨ 核心特性

🤖 AI 对话场景完美适配

1:1 复刻 DeepSeek 聊天效果：完美还原主流 AI 聊天界面的视觉体验
双模式支持 ：thinking（思考中）和 answer（回答中）两种显示模式
流式数据零延迟：无论后端一次推送多少字符，都能逐字流畅渲染

📊 完整的 Markdown 生态

完整语法支持：代码高亮、表格、列表等所有主流 Markdown 语法
数学公式渲染 ：内置 KaTeX 支持，支持 $...$ 和 \[...\] 语法
主题切换：支持亮色/暗色主题，适配不同产品风格
插件化架构：兼容 remark/rehype 插件生态，轻松扩展功能

🔧 强大的开发体验

命令式 API ：支持 stop、resume、start、restart 等方法
丰富回调函数 ：onTypedChar、onBeforeTypedChar、onStart、onEnd
TypeScript 支持：完整的类型定义，开发体验丝滑

🎬 高性能动画引擎

双定时器模式 ：支持 requestAnimationFrame 和 setTimeout 两种模式
高频打字支持 ：requestAnimationFrame 模式下间隔可接近 0ms
帧同步渲染：与浏览器刷新率完美配合，动画丝滑不卡顿

📦 快速安装

bash 复制代码

npm install ds-markdown
# 或
yarn add ds-markdown
# 或  
pnpm add ds-markdown

🚀 基础用法

1. 基础打字动画

tsx 复制代码

import DsMarkdown from 'ds-markdown';
import 'ds-markdown/style.css';

function App() {
  return (
    <DsMarkdown interval={20} answerType="answer">
      # Hello ds-markdown
      这是一个**高性能**的打字动画组件！
      ## 特性
      - ⚡ 零延迟流式处理
      - 🎬 流畅打字动画
      - 🎯 完美语法支持
    </DsMarkdown>
  );
}

2. 数学公式支持

tsx 复制代码

import DsMarkdown from 'ds-markdown';
import { katexPlugin } from 'ds-markdown/plugins';
import 'ds-markdown/style.css';
import 'ds-markdown/katex.css';

function MathDemo() {
  return (
    <DsMarkdown 
      interval={20} 
      answerType="answer" 
      plugins={[katexPlugin]} 
      math={{ splitSymbol: 'dollar' }}
    >
      # 勾股定理
      在直角三角形中，斜边的平方等于两条直角边的平方和：
      $a^2 + b^2 = c^2$
    </DsMarkdown>
  );
}

3. AI 对话场景

tsx 复制代码

function ChatDemo() {
  const [thinking, setThinking] = useState('');
  const [answer, setAnswer] = useState('');

  const handleAsk = () => {
    setThinking('🤔 正在思考您的问题...');
    
    setTimeout(() => {
      setAnswer(`# 关于 React 19
      
React 19 带来了许多激动人心的新特性：

## 🚀 主要更新
1. **React Compiler** - 自动优化性能
2. **Actions** - 简化表单处理  
3. **Document Metadata** - 内置 SEO 支持`);
    }, 2000);
  };

  return (
    <div>
      <button onClick={handleAsk}>询问 AI</button>
      
      {thinking && (
        <DsMarkdown answerType="thinking" interval={30}>
          {thinking}
        </DsMarkdown>
      )}
      
      {answer && (
        <DsMarkdown answerType="answer" interval={15}>
          {answer}
        </DsMarkdown>
      )}
    </div>
  );
}

🎯 高级用法

命令式 API

tsx 复制代码

import { useRef } from 'react';
import { MarkdownCMD, MarkdownCMDRef } from 'ds-markdown';

function AdvancedDemo() {
  const markdownRef = useRef<MarkdownCMDRef>(null);
  
  const addContent = () => {
    markdownRef.current?.push('新增的内容', 'answer');
  };
  
  const clearContent = () => {
    markdownRef.current?.clear();
  };

  return (
    <div>
      <button onClick={addContent}>添加内容</button>
      <button onClick={clearContent}>清空内容</button>
      <button onClick={() => markdownRef.current?.stop()}>暂停</button>
      <button onClick={() => markdownRef.current?.resume()}>继续</button>
      <button onClick={() => markdownRef.current?.restart()}>重新开始</button>
      
      <MarkdownCMD ref={markdownRef} interval={25} />
    </div>
  );
}

丰富的回调控制

tsx 复制代码

function CallbackDemo() {
  const handleTypedChar = (data) => {
    console.log('打字进度:', data.percent + '%');
    console.log('当前字符:', data.currentChar);
  };
  
  const handleBeforeTypedChar = async (data) => {
    // 在字符显示前进行异步操作
    if (data.currentChar === '!') {
      await new Promise(resolve => setTimeout(resolve, 500));
    }
  };

  return (
    <DsMarkdown 
      interval={20} 
      onTypedChar={handleTypedChar}
      onBeforeTypedChar={handleBeforeTypedChar}
      onStart={() => console.log('开始打字')}
      onEnd={() => console.log('打字完成')}
    >
      # 回调演示
      这里会触发各种回调函数！
    </DsMarkdown>
  );
}

🔧 核心 API

基础属性

属性	类型	默认值	描述
`interval`	`number`	`30`	打字间隔时间(ms)
`answerType`	`'thinking'	'answer'`	`'answer'`
`disableTyping`	`boolean`	`false`	是否禁用打字效果
`timerType`	`'setTimeout'	'requestAnimationFrame'`	`'setTimeout'`
`autoStartTyping`	`boolean`	`true`	是否自动开始打字

主题配置

属性	类型	描述
`theme`	`'light'	'dark'`
`plugins`	`IMarkdownPlugin[]`	Markdown 插件
`math`	`{ splitSymbol: 'bracket'	'dollar' }`

回调函数

回调	类型	描述
`onStart`	`(data) => void`	开始打字时触发
`onTypedChar`	`(data) => void`	每个字符打字完成后触发
`onBeforeTypedChar`	`(data) => Promise<void>`	字符打字前触发(支持异步)
`onEnd`	`(data) => void`	打字完成时触发

🌟 为什么选择 ds-markdown？

适用场景

✅ AI 聊天机器人/助手界面
✅ 实时问答/知识库系统
✅ 教育内容/数学公式展示
✅ 技术文档/API 说明
✅ 产品演示/交互式内容
✅ 任何需要"打字机"效果的 Markdown 内容

🔗 相关链接

🎉 总结

如果你正在开发 AI 聊天、知识问答或需要动态 Markdown 展示的应用，ds-markdown 是你的不二选择！

它不仅提供了流畅的打字动画效果，更针对 AI 聊天场景进行了深度优化，让你的应用拥有媲美 DeepSeek、ChatGPT 的专业体验。

立即开始体验吧！ ⭐ 如果觉得有用，别忘了给项目点个 Star！