Composants de contenu

Ces composants affichent du Markdown, du code, des diffs et de grands caractères sur la grille de cellules.

#<Markdown>

Markdown adapté au streaming. Passez une chaîne qui s’allonge et la frame reste stable.

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

#<Code>

Coloration syntaxique pour ts, tsx, json, bash, python, rust, go et d’autres langages.

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

#<Diff>

Diffs unifiés ou calculés à partir de { before, after }.

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

#<Spinner>

Variantes : dots, pulse, matrix, line et braille (pour les terminaux ; Menlo ne possède pas de glyphes braille). Les minuteurs s’arrêtent pendant la pause.

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

#<AsciiFont>

Grands caractères en pixels pour les en-têtes.

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

Utilisez font="compact" pour une variante sur 3 lignes. Passez une police FIGlet de @textjs/font, comme font={slant}, pour un lettrage FIGlet.