Streamdown的集成过程分为三个关键步骤:
- 依存的なインストール:通过npm/pnpm等工具安装最新版本
npm i streamdown
注意需要Node.js≥18和React≥19.1.1的环境支持 - 样式配置:在全局CSS文件(如globals.css)添加核心样式表
@import '../node_modules/streamdown/dist/index.css';
需根据项目实际结构调整node_modules路径 - 基础使用:像常规React组件那样引入并包裹Markdown内容
import { Streamdown } from 'streamdown';
<Streamdown>{yourMarkdownText}</Streamdown>
特别要注意的是,由于涉及实时语法解析,建议保持parseIncompleteMarkdown
属性为默认的true。若需要自定义渲染组件(如重写链接行为),可通过components
prop传入覆盖规则。
この答えは記事から得たものである。Streamdown: AIストリーミングの応答性を追求したMarkdownレンダラについて