슬라이드로 보기

MDX 문법

이 블로그에서 사용할 mdx 문법을 정리합니다.

MDX 문법 및 사용 가이드

  • 포스트 뷰, 슬라이드 뷰, pdf 프린트를 안정적으로 구현하기 위해 이 블로그에서 사용할 한정적인 mdx 문법들을 정리합니다.
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

a

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
c
src/app/page.tsx
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")

b

  1. 1
c
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")

c

  • 1
  • 2
  • 3
  • 4
c
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")
printf("hello, world!!")

1. 기본 문법

1.1 제목 (Headings)

#의 개수로 제목의 수준을 결정합니다.

1.2 텍스트 강조 (Emphasis)

  • 기울임꼴: *text* 또는 _text_
  • 굵게: **text** 또는 __text__
  • 굵은 기울임꼴: ***text***
  • 취소선: ~~text~~

1.3 리스트

  • -, \1, 와 같은 리스트 문법

1.4 인용구 (Blockquotes)

> 기호를 사용하며, 중첩해서 사용할 수도 있습니다.

MDX는 마크다운 안에서 컴포넌트를 쓸 수 있게 해줍니다.

정말 편리하죠?

1.5 작업 목록 (Task Lists)

  • MDX 이해하기
  • 멋진 포스트 작성하기
  • 블로그 꾸미기

1.6 링크

2. 복합 문법 (GitHub Flavored Markdown)

2.1 표 (Tables)

파이프(|)와 하이픈(-)을 사용하여 깔끔한 표를 만들 수 있습니다.

기능지원설명
JSX✅컴포넌트 직접 사용 가능
Expressions✅{1 + 1} 같은 JS 표현식
GFM✅GitHub 스타일 문법 지원

.
.
.
.
]
]
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

2.3 각주 (Footnotes)

문장 뒤에 각주를 달 수 있습니다.1

3. 코드 블록과 하이라이팅

  • rehype-pretty-code와 shiki를 사용하여 아름다운 코드 하이라이팅을 제공합니다.

3.1 인라인 코드

  • 문장 중간에 `내용`를 사용하여 const x = 10처럼 짧은 코드를 넣을 수 있습니다.

3.2 다중 라인 코드 블록

  • ```로 코드라인을 감싸 명시하여 구문 강조를 적용합니다.
ts
lib/posts.ts
interface Post {
  title: string;
  date: string;
  content: string;
}
 
function getPost(id: string): Post {
  // logic here
}

4. 수학 수식 (Math & LaTeX)

remark-math와 rehype-katex를 통해 복잡한 수식을 렌더링할 수 있습니다.

  • 인라인 수식: E=mc2E = mc^2
  • 블록 수식:
I=∫abf(x)dxI = \int_{a}^{b} f(x) dx

5.3 이미지 처리 (MdxImage)

우리 블로그는 커스텀 MdxImage 컴포넌트를 사용하여 이미지를 최적화합니다.

샘플 이미지

참고: 더 자세한 정보는 MDX 공식 문서를 확인하세요.

plane html

  • 가끔가다 유튜브 바로 올려둘 때가 있습니다.

Footnotes

  1. 각주는 페이지 하단에 자동으로 모여서 표시됩니다. ↩