內容元件

這些元件在儲存格網格上渲染 Markdown、程式碼、差異和大型文字。

#<Markdown>

支援串流的 Markdown。傳入持續增長的字串，影格仍保持穩定。

const [text, setText] = useState("");useEffect(() => stream.on("token", (t) => setText((s) => s + t)), []);return <Markdown>{text}</Markdown>;

#<Code>

支援 ts、tsx、json、bash、python、rust、go 等語言的語法醒目提示。

<Code code={source} language="tsx" showLineNumbers maxHeight={12} />

#<Diff>

統一格式的差異，或由 { before, after } 計算差異。

<Diff patch={{ before, after, filename: "app/page.tsx" }} />

#<Spinner>

樣式：dots、pulse、matrix、line 和 braille（用於終端機；Menlo 沒有點字字形）。暫停時，計時器會停止。

<Spinner variant="dots" label="Building…" />

#<AsciiFont>

用於標題的大型像素文字。

<AsciiFont text="▼ TEXT.JS" color="accent" />

使用 font="compact" 可切換為 3 行樣式。傳入來自 @textjs/font 的 FIGlet 字型，例如 font={slant}，即可顯示 FIGlet 文字。