컴포넌트 갤러리

MDX 글 안에서 사용 가능한 모든 reusable 컴포넌트의 라이브 데모. 글 작성 시 import 후 사용. noIndex — 검색엔진 색인 제외.

CodeWithOutput

Shiki 하이라이팅 + 결과 분할. variants 로 다국어 탭.

Props: { code, language, output, outputLanguage, variants?, codeWidth?, title? }

python

print("hello world")
# multiple lines
for i in range(3):
    print(i)

REPL

hello world
0
1
2

클릭 → 줌 다이얼로그, ⤓ SVG/PNG 다운로드.

flowchart LR
  A[Idea] --> B(Sketch)
  B --> C{Refine?}
  C -- yes --> B
  C -- no --> D[Ship]

OG 메타데이터 빌드시 캐싱 → src/data/url-previews.json

Props: { url }

Props: { id, title?, start?, cookieless? }

Props: { id, title? }

Props: { id, user?, file? }

platform.twitter.com/widgets.js lazy load. SSR 불가, JS 필요.

Props: { id, user?, align?, theme? }

tweet

Props: { id, user, tab?, height?, theme? }

Props: { fileUrl? | embedUrl?, title?, height? }

컴포넌트	Props	참고
CodeWithOutput	`{ code, language, output, outputLanguage, variants?, codeWidth?, title? }`	Shiki 하이라이팅 + 결과 분할. variants 로 다국어 탭.
Mermaid (코드 블록)	```mermaid 코드블록	클릭 → 줌 다이얼로그, ⤓ SVG/PNG 다운로드.
UrlPreview	`{ url }`	OG 메타데이터 빌드시 캐싱 → src/data/url-previews.json
YouTube	`{ id, title?, start?, cookieless? }`
Vimeo	`{ id, title? }`
GitHub Gist	`{ id, user?, file? }`
Tweet / X	`{ id, user?, align?, theme? }`	platform.twitter.com/widgets.js lazy load. SSR 불가, JS 필요.
CodePen	`{ id, user, tab?, height?, theme? }`
Figma	`{ fileUrl? \| embedUrl?, title?, height? }`