Inhaltskomponenten

Diese Komponenten rendern Markdown, Code, Diffs und große Schrift auf dem Zellenraster.

#<Markdown>

Streaming-sicheres Markdown. Übergib eine wachsende Zeichenkette und der Frame bleibt stabil.

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

#<Code>

Syntaxhervorhebung für ts, tsx, json, bash, python, rust, go und weitere Sprachen.

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

#<Diff>

Unified-Diffs oder aus { before, after } berechnet.

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

#<Spinner>

Varianten: dots, pulse, matrix, line und braille (für Terminals; Menlo hat keine Braille-Glyphen). Timer stoppen während einer Pause.

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

#<AsciiFont>

Große Pixelschrift für Überschriften.

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

Verwende font="compact" für eine Variante mit 3 Zeilen. Übergib für FIGlet-Schrift eine FIGlet-Schriftart aus @textjs/font, etwa font={slant}.