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

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

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

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

✨ 核心特性

🤖 AI 对话场景完美适配

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

📊 完整的 Markdown 生态

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

🔧 强大的开发体验

  • 命令式 API :支持 stopresumestartrestart 等方法
  • 丰富回调函数onTypedCharonBeforeTypedCharonStartonEnd
  • TypeScript 支持:完整的类型定义,开发体验丝滑

🎬 高性能动画引擎

  • 双定时器模式 :支持 requestAnimationFramesetTimeout 两种模式
  • 高频打字支持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!

相关推荐
深耕AI1 分钟前
【教程】在ubuntu安装Edge浏览器
前端·edge
倔强青铜三5 分钟前
苦练Python第4天:Python变量与数据类型入门
前端·后端·python
倔强青铜三14 分钟前
苦练Python第3天:Hello, World! + input()
前端·后端·python
上单带刀不带妹15 分钟前
JavaScript中的Request详解:掌握Fetch API与XMLHttpRequest
开发语言·前端·javascript·ecmascript
倔强青铜三32 分钟前
苦练Python第2天:安装 Python 与设置环境
前端·后端·python
我是若尘1 小时前
Webpack 入门到实战 - 复习强化版
前端
晓13131 小时前
JavaScript基础篇——第五章 对象(最终篇)
开发语言·前端·javascript
倔强青铜三1 小时前
苦练Python第1天:为何要在2025年学习Python
前端·后端·python
满分观察网友z1 小时前
uniapp使用video实现沉浸式在线课程学习平台
前端