Prose
Prose
Prose는 원격(remote) HTML 콘텐츠를 스타일링할 때 사용해요. CMS나 데이터베이스에서 가져온 HTML을 디자인 시스템의 언어에 맞게 렌더링할 수 있어요.
출처: 문서
본문
설정 (Setup)
아직 스니펫이 없다면 다음 명령을 실행해 prose 스니펫을 추가하세요.
npx @chakra-ui/cli snippet add prose
사용법 (Usage)
import { Prose } from "@/components/ui/prose"
<Prose>
<div dangerouslySetInnerHTML={{ __html: "..." }} />
</Prose>
예시 (Examples)
크기 (Sizes)
size prop을 사용해 Prose 컴포넌트의 크기를 바꿀 수 있어요.
Blockquote
Blockquote 요소는 Blockquote 컴포넌트의 디자인 언어에 맞게 스타일링돼요.
목록 (List)
목록 요소는 List 컴포넌트의 디자인 언어에 맞게 스타일링돼요.
React Markdown
react-markdown 라이브러리를 사용해 마크다운 콘텐츠를 렌더링하는 예시예요.
테이블 (Table)
테이블 요소는 Table 컴포넌트의 디자인 언어에 맞게 스타일링돼요.