Komponenty treści

Te komponenty renderują Markdown, kod, różnice i duże litery na siatce komórek.

#<Markdown>

Markdown przystosowany do strumieniowania. Przekaż rosnący ciąg znaków, a klatka pozostanie stabilna.

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

#<Code>

Podświetlanie składni dla ts, tsx, json, bash, python, rust, go i innych języków.

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

#<Diff>

Różnice w formacie unified lub obliczane na podstawie { before, after }.

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

#<Spinner>

Warianty: dots, pulse, matrix, line i braille (dla terminali; Menlo nie ma glifów brajlowskich). Timery zatrzymują się podczas pauzy.

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

#<AsciiFont>

Duże pikselowe litery do nagłówków.

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

Użyj font="compact", aby uzyskać wariant o wysokości 3 wierszy. Przekaż font FIGlet z pakietu @textjs/font, na przykład font={slant}, aby uzyskać litery w stylu FIGlet.