Componentes de conteúdo

Esses componentes renderizam Markdown, código, diffs e letras grandes na grade de células.

#<Markdown>

Markdown seguro para streaming. Passe uma string que cresce e o quadro permanece estável.

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

#<Code>

Realce de sintaxe para ts, tsx, json, bash, python, rust, go e mais.

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

#<Diff>

Diffs unificados ou calculados a partir de { before, after }.

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

#<Spinner>

Variantes: dots, pulse, matrix, line e braille (para terminais; Menlo não tem glifos braille). Os temporizadores param durante a pausa.

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

#<AsciiFont>

Letras grandes em pixels para cabeçalhos.

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

Use font="compact" para uma variante de 3 linhas. Passe uma fonte FIGlet de @textjs/font, como font={slant}, para letras em figlet.