streamdown

环境要求

• 已安装 Node.js 与 npm（README 使用 npm i 安装）
• 一个 React 项目（streamdown 是 react-markdown 的即插即用替代品）
• 项目使用 Tailwind CSS，可编辑 globals.css
• 如需数学公式渲染，需引入 katex 的 CSS（示例中已 import）

安装与启动步骤

1. 1安装 Streamdown

   在项目根目录执行 npm 安装，streamdown 会作为依赖加入 package.json，安装后即可替代 react-markdown。

   npm i streamdown

   复制

2. 2按需安装插件

   需要代码高亮、Mermaid、数学公式或 CJK 支持时，另行安装对应插件包；README 示例导入了 code、mermaid、math、cjk，具体安装方式见各插件文档。

3. 3配置 Tailwind 扫描

   在 globals.css 中添加 @source 指令，让 Tailwind 能扫描到 streamdown 使用的工具类；路径需相对该 CSS 文件指向含 streamdown 的 node_modules。

   @source "../node_modules/streamdown/dist/*.js";

   复制

4. 4引入样式文件

   在组件入口文件中引入 streamdown 自带样式；若使用数学公式插件，再引入 KaTeX 的样式文件。顺序不限，但必须在渲染前完成引入。

   import "streamdown/styles.css";
   import "katex/dist/katex.min.css";

   复制

5. 5在组件中使用

   从 streamdown 导入 Streamdown 组件，把流式返回的文本作为 children 传入，并通过 plugins 传入已安装插件。

   import { Streamdown } from "streamdown";
   import { code } from "@streamdown/code";
   import { mermaid } from "@streamdown/mermaid";
   import { math } from "@streamdown/math";
   import { cjk } from "@streamdown/cjk";
   
   export default function Chat({ text, isStreaming }) {
     return (
       
         {text}
       
     );
   }

   复制

6. 6验证流式渲染

   启动你的开发服务器，让 AI 逐字输出包含未闭合代码块或残缺表格的 Markdown，观察渲染是否稳定、不闪烁、不报错。

关键配置

如何确认成功

启动开发服务器后，页面中的流式 Markdown 能随 token 持续追加稳定渲染，未闭合代码块和表格不再导致抖动或报错，即为成功。

常见问题

注意事项

• @source 路径必须相对于你自己的 CSS 文件，层级不对会导致 Tailwind 扫不到样式。
• 只为实际安装的插件添加 @source 条目，避免引用不存在的包。
• README 未提供启动命令、端口等信息，请按自己项目的开发流程启动与调试。
• 项目主要为 AI 流式输出设计，非流式场景也可作为 react-markdown 的替代使用。