markdown

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

assistant-ui Markdown

Always consult assistant-ui.com/llms.txt for the latest API.

Render and customize assistant message text as markdown with

MarkdownTextPrimitive

from

@assistant-ui/react-markdown

, wired into the

MessagePrimitive.Parts

text branch.

请始终查阅assistant-ui.com/llms.txt获取最新API。

使用@assistant-ui/react-markdown中的

MarkdownTextPrimitive

，将助手消息文本渲染并自定义为Markdown格式，需将其接入

MessagePrimitive.Parts

的文本分支。

References

参考资料

./references/markdown-text.md -- MarkdownTextPrimitive setup
./references/syntax-highlighting.md -- code highlighting (react-shiki / react-syntax-highlighter)
./references/latex-mermaid.md -- LaTeX and Mermaid
./references/streamdown.md -- StreamdownTextPrimitive alternative

./references/markdown-text.md -- MarkdownTextPrimitive 配置指南
./references/syntax-highlighting.md -- 代码高亮（react-shiki / react-syntax-highlighter）
./references/latex-mermaid.md -- LaTeX与Mermaid图表
./references/streamdown.md -- StreamdownTextPrimitive 替代方案

Orientation

入门指南

MarkdownTextPrimitive

renders one text part as markdown. The registry component (

npx assistant-ui@latest add markdown-text

) generates

components/assistant-ui/markdown-text.tsx

, which exports a memoized

MarkdownText

built on the primitive plus a

defaultComponents

map from

unstable_memoizeMarkdownComponents

. Render

MarkdownText

from the

text

branch of

MessagePrimitive.Parts

tsx

import "@assistant-ui/react-markdown/styles/dot.css";
import { MarkdownTextPrimitive } from "@assistant-ui/react-markdown";
import { MessagePrimitive } from "@assistant-ui/react";
import remarkGfm from "remark-gfm";
import { memo } from "react";

const MarkdownTextImpl = () => (
  <MarkdownTextPrimitive
    remarkPlugins={[remarkGfm]}
    className="aui-md"
    components={defaultComponents}
  />
);

export const MarkdownText = memo(MarkdownTextImpl);

<MessagePrimitive.Parts>
  {({ part }) => (part.type === "text" ? <MarkdownText /> : null)}
</MessagePrimitive.Parts>;

Add highlighting, math, or diagrams by extending the same primitive:

rehypePlugins

for KaTeX,

componentsByLanguage

for a per-language

SyntaxHighlighter

(Mermaid, diff), and

preprocess

to normalize raw text before parsing. See the references for each. For a batteries-included alternative with built-in Shiki, KaTeX, Mermaid, and block streaming, swap in

StreamdownTextPrimitive

from

@assistant-ui/react-streamdown

MarkdownTextPrimitive

可将单个文本部分渲染为Markdown。注册组件（

npx assistant-ui@latest add markdown-text

）会生成

components/assistant-ui/markdown-text.tsx

，该文件导出基于primitive构建的缓存版

MarkdownText

，以及来自

unstable_memoizeMarkdownComponents

的

defaultComponents

映射表。从

MessagePrimitive.Parts

的

text

分支渲染

MarkdownText

。

tsx

import "@assistant-ui/react-markdown/styles/dot.css";
import { MarkdownTextPrimitive } from "@assistant-ui/react-markdown";
import { MessagePrimitive } from "@assistant-ui/react";
import remarkGfm from "remark-gfm";
import { memo } from "react";

const MarkdownTextImpl = () => (
  <MarkdownTextPrimitive
    remarkPlugins={[remarkGfm]}
    className="aui-md"
    components={defaultComponents}
  />
);

export const MarkdownText = memo(MarkdownTextImpl);

<MessagePrimitive.Parts>
  {({ part }) => (part.type === "text" ? <MarkdownText /> : null)}
</MessagePrimitive.Parts>;

通过扩展同一个primitive添加高亮、数学公式或图表功能：使用

rehypePlugins

实现KaTeX渲染，通过

componentsByLanguage

为每种语言注册

SyntaxHighlighter

（Mermaid、diff），以及使用

preprocess

在解析前规范化原始文本。具体请查看各参考资料。如需开箱即用的替代方案（内置Shiki、KaTeX、Mermaid和块流式处理），可替换为@assistant-ui/react-streamdown中的

StreamdownTextPrimitive

。

Common Gotchas

常见问题

Nothing renders / plain text shows. The
```
text
```
branch must return
```
MarkdownText
```
; returning
```
<p>{part.text}</p>
```
bypasses markdown entirely.
No syntax highlighting. Highlighting is not bundled. Register a
```
SyntaxHighlighter
```
in
```
defaultComponents
```
(react-shiki recommended) per the syntax-highlighting reference.
KaTeX has no styling. Import
```
katex/dist/katex.min.css
```
once at the app root;
```
rehypeKatex
```
only emits markup.
Mermaid parses partial diagrams while streaming. Gate rendering on stream completion (the reference uses
```
useAuiState
```
to detect the closing fence) instead of rendering every delta.
Memoization export name. The package exports
```
unstable_memoizeMarkdownComponents
```
; the generated file aliases it to
```
memoizeMarkdownComponents
```
.
Unstyled by default. The
```
aui-md
```
class and
```
styles/dot.css
```
provide base styling; add your own Tailwind/CSS otherwise.

无内容渲染 / 仅显示纯文本：
```
text
```
分支必须返回
```
MarkdownText
```
；若返回
```
<p>{part.text}</p>
```
则会完全跳过Markdown解析。
无语法高亮：高亮功能未捆绑在内。需按照语法高亮参考资料，在
```
defaultComponents
```
中注册
```
SyntaxHighlighter
```
（推荐使用react-shiki）。
KaTeX无样式：需在应用根目录导入一次
```
katex/dist/katex.min.css
```
；
```
rehypeKatex
```
仅生成标记内容。
流式传输时Mermaid解析不完整的图表：需在流完成后再渲染（参考资料中使用
```
useAuiState
```
检测闭合标记），而非渲染每个增量内容。
缓存函数导出名称：该包导出的是
```
unstable_memoizeMarkdownComponents
```
；生成的文件将其别名为
```
memoizeMarkdownComponents
```
。
默认无样式：
```
aui-md
```
类和
```
styles/dot.css
```
提供基础样式；否则需自行添加Tailwind/CSS样式。

markdown

Original

Translation

assistant-ui Markdown

assistant-ui Markdown

References

参考资料

Orientation

入门指南

Common Gotchas

常见问题

Related Skills

相关技能