React的Fluxdown
流式Markdown,为React应用准备好了。
fluxdown 呈现包含基本样式、代码高亮显示和复制按钮的Markdown。它支持GFM表、任务列表、删除和自动链接。在生成过程中,它可以平滑输入的文本,修复未完成的语法,并淡入尾随字符。
安装
在React 18或19应用中:
pnpm add fluxdown
呈现消息
import { Fluxdown } from "fluxdown";
type MessageProps = {
text: string;
isStreaming: boolean;
};
export function Message({ text, isStreaming }: MessageProps) {
return <Fluxdown text={text} streaming={isStreaming} />;
}
通过 到目前为止收到了完整的消息 作为 text,如有必要,在请求处理程序中积累块。集 isStreaming 来 false 请求完成、取消或失败时。Fluxdown然后显示所有接收到的文本并停止其流效果。你的应用程序处理请求、取消和错误。
对于静态Markdown,使用 <Fluxdown text={text} />. 在消息列表中,为每个组件提供一个稳定的消息ID作为其 key。
如果你的打包器不自动加载这些样式,把下面的添加到你的应用的全局样式条目中:
import "fluxdown/styles.css";
让它成为你自己的
| 选项 | 目的 |
|---|---|
streaming | 配置尾随语法修复、平滑输出和可选的视觉效果。 |
theme | 使用浅色或深色预设,或覆盖颜色、排版和间距。 |
build | 启用语法,如公式和脚注。 |
plugins | 自定义解析、呈现、语义槽和交互。 |
className, style | 设置容器布局和样式。 |
streaming={true} 允许拖尾修复和平滑输出。添加一个可选的视觉效果:
<Fluxdown text={text} streaming={isStreaming && { effect: "shad" }} />
文档
有关React之外的自定义渲染器,请参见 @fluxdown/core。
贡献与许可
看到 CONTRIBUTING.md. 下许可 麻省理工学院。