Componentes de contenido

Estos componentes renderizan Markdown, código, diferencias y letras grandes en la cuadrícula de celdas.

#<Markdown>

Markdown compatible con streaming. Pasa una cadena que crece y el fotograma se mantiene estable.

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

#<Code>

Resaltado de sintaxis para ts, tsx, json, bash, python, rust, go y más.

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

#<Diff>

Diferencias unificadas o calculadas a partir de { before, after }.

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

#<Spinner>

Variantes: dots, pulse, matrix, line y braille (para terminales; Menlo no tiene glifos braille). Los temporizadores se detienen durante la pausa.

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

#<AsciiFont>

Letras grandes de píxeles para encabezados.

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

Usa font="compact" para una variante de 3 filas. Pasa una fuente FIGlet de @textjs/font, como font={slant}, para obtener letras figlet.