کامپوننت‌های محتوا

این کامپوننت‌ها 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>

تفاوت‌ها در قالب یکپارچه یا محاسبه‌شده از { 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" />

برای گونهٔ 3 ردیفی از font="compact" استفاده کنید. برای حروف‌چینی figlet، یک فونت FIGlet از @textjs/font، مانند font={slant}، به آن بدهید.