콘텐츠 컴포넌트

이 컴포넌트들은 셀 그리드에 Markdown, 코드, diff와 큰 글자를 렌더링해요.

#<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>

통합 diff를 표시하거나 { before, after }로 diff를 계산해요.

<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 글자를 렌더링하려면 font={slant}처럼 @textjs/font의 FIGlet 폰트를 전달하세요.