Componenti di contenuto

Questi componenti visualizzano Markdown, codice, diff e caratteri grandi sulla griglia di celle.

#<Markdown>

Markdown compatibile con lo streaming. Passa una stringa che cresce e il frame resta stabile.

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

#<Code>

Evidenziazione della sintassi per ts, tsx, json, bash, python, rust, go e altri linguaggi.

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

#<Diff>

Diff unificati o calcolati da { before, after }.

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

#<Spinner>

Varianti: dots, pulse, matrix, line e braille (per i terminali; Menlo non ha glifi braille). I timer si fermano durante la pausa.

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

#<AsciiFont>

Caratteri grandi in pixel per le intestazioni.

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

Usa font="compact" per una variante a 3 righe. Passa un font FIGlet da @textjs/font, come font={slant}, per i caratteri figlet.