yunkoo.dev

MDX Component

CodePanel

파일명이나 설명이 필요한 코드 예시를 묶어서 보여줍니다.

CodePanel

파일명이나 설명이 필요한 코드 예시를 묶어서 보여줍니다.

title은 필수입니다. language를 넣으면 오른쪽에 작은 메타 정보로 표시됩니다.

Preview

app/page.tsxtsx
export default function Page() {  return <main />;}

MDX

<CodePanel
  title="app/page.tsx"
  language="tsx"
  size="sm"
  code={'export default function Page() {\n  return <main />;\n}'}
/>

More Examples

설정 파일 예시

package.jsonjson
{"scripts":{"build":"next build"}}

MDX

<CodePanel
  title="package.json"
  language="json"
  code={'{"scripts":{"build":"next build"}}'}
/>