@assistant-ui/react-streamdown
逐步减少- 基于标记下渲染 @assistant-ui/react的空投替换 @assistant-ui/react-markdown 有内置的Shiki,KaTeX,和美人鱼支持,优化了AI流输出.
何时使用
| 软件包 | 最好还是 |
|---|---|
@assistant-ui/react-markdown | 轻量级渲染; 带来自己的语法亮点 . |
@assistant-ui/react-streamdown | 有内置史克,克特克,和美人鱼的特色丰富. |
@assistant-ui/react-syntax-highlighter | 与 react-markdown 当你只需要代码块加亮. |
安装
npm install @assistant-ui/react @assistant-ui/react-streamdown
可选特性:
npm install @streamdown/code @streamdown/math @streamdown/mermaid @streamdown/cjk
CSS 设置
将其控制按钮(代码-块工具栏、美人鱼全屏)和流线护栏作为Tailwind公用事业类别。 尾风 v4 不扫描 node_modules 默认时添加一个 @source 向导入 Tailwind 的样式表下流指令( 以及每个安装的插件一个) :
@import "tailwindcss";
@source "../node_modules/streamdown/dist/*.js";
@source "../node_modules/@streamdown/code/dist/*.js";
@source "../node_modules/@streamdown/math/dist/*.js";
@source "../node_modules/@streamdown/mermaid/dist/*.js";
@source "../node_modules/@streamdown/cjk/dist/*.js";
调整您的项目的相对路径 node_modules。在一个pnpm 或 Turbo 单曲中,你通常需要更多 ../ 块以到达工作空间根。 只保留您实际安装的软件包的插件行 .
没有这些指令,复制、下载和全屏按钮就会变形 caret 指标保持不变.
如果你使用 animated 道具或 createAnimatePlugin 对于单词级的淡出, 也可以在您的应用程序条目中导入一次密钥框 :
import "streamdown/styles.css";
有关Shadcn/ui设计标志的详情,请参见 向下流读取。 。 。 .
使用量
import { StreamdownTextPrimitive } from "@assistant-ui/react-streamdown";
import { code } from "@streamdown/code";
import { math } from "@streamdown/math";
import { mermaid } from "@streamdown/mermaid";
import "katex/dist/katex.min.css";
export const MarkdownText = () => (
<StreamdownTextPrimitive
plugins={{ code, math, mermaid }}
shikiTheme={["github-light", "github-dark"]}
/>
);
完整道具参考、插件文件、性能指南和 react-markdown 移民笔记 助理-ui.com/docs/指南/下游。 。 。 .