Component nội dung

Các component này render Markdown, mã, bản diff và chữ cỡ lớn trên lưới ô.

#<Markdown>

Markdown an toàn khi streaming. Truyền vào một chuỗi tăng dần và frame vẫn ổn định.

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

#<Code>

Tô sáng cú pháp cho ts, tsx, json, bash, python, rust, go và nhiều ngôn ngữ khác.

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

#<Diff>

Bản diff hợp nhất, hoặc tính từ { before, after }.

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

#<Spinner>

Biến thể: dots, pulse, matrix, line và braille (cho terminal; Menlo không có ký tự braille). Bộ hẹn giờ dừng khi tạm dừng.

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

#<AsciiFont>

Chữ pixel cỡ lớn cho tiêu đề.

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

Dùng font="compact" cho biến thể 3 dòng. Truyền vào phông FIGlet từ @textjs/font, như font={slant}, để tạo chữ figlet.