Компоненты контента

Эти компоненты отображают Markdown, код, различия и крупные надписи на сетке ячеек.

#<Markdown>

Markdown с поддержкой потокового вывода. Передавайте растущую строку, и кадр останется стабильным.

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

#<Code>

Подсветка синтаксиса для ts, tsx, json, bash, python, rust, go и других языков.

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

#<Diff>

Различия в формате unified diff или вычисленные из { before, after }.

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

#<Spinner>

Варианты: dots, pulse, matrix, line и braille (для терминалов; в Menlo нет символов Брайля). Во время паузы таймеры останавливаются.

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

#<AsciiFont>

Крупные пиксельные надписи для заголовков.

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

Используйте font="compact" для варианта высотой в 3 строки. Передайте шрифт FIGlet из @textjs/font, например font={slant}, для надписей в стиле FIGlet.