コンテンツコンポーネント

これらのコンポーネントは、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>

Unified形式の差分、または { 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" />

3行の表示には font="compact" を使います。FIGlet文字の表示には、font={slant} のように @textjs/font のFIGletフォントを渡します。