Streamdown 接入

@slexkit/streamdown 适用于已经使用 Streamdown 渲染 Markdown 的 React 页面。适配器只接管语言为 slex 的 fence；其余 Markdown、公式和代码块仍由 Streamdown 渲染。

本地运行：

bun run build:core
bun run --filter @slexkit/streamdown build
bun examples/dev-server.mjs streamdown

源码位于 examples/streamdown。Streamdown 与 Tiptap 示例使用同一份 RC 低通滤波器内容，用于对照两种宿主的渲染边界。

打开集成指南 · 查看可运行源码

职责划分

普通 Markdown、公式、表格和非 slex 代码块继续由 Streamdown 渲染。只写状态的 slex fence 不渲染独立 UI，但会写入同一 artifact state，供后续可渲染 fence 读取。

最小配置：

import { Streamdown } from "streamdown";
import { createSlexKitRenderer } from "@slexkit/streamdown";
import "@slexkit/theme-shadcn/style.css";
import "@slexkit/streamdown/style.css";

const slexkitRenderer = createSlexKitRenderer({
  domain: "message-1",
  showChrome: false
});

export function Message({ markdown }: { markdown: string }) {
  return (
    <Streamdown plugins={{ renderers: [slexkitRenderer] }}>
      {markdown}
    </Streamdown>
  );
}

如果项目已经以 Streamdown 作为 Markdown 渲染层，使用 @slexkit/streamdown。如果宿主有自己的 Markdown parser 或 renderer，直接接入自定义 Markdown host API。