MDX atom component란 MDX의 핵심 렌더링 구성 요소를 의미합니다

공식사이트에서 MDX component 구성요소 알아보기

💡

src/components/MDXAtoms에 모든 component가 있습니다

기본 글씨체

1. 사용법

기본 글자를 적어봅니다.

문단 나누기는 1번 띄어쓰기를 해주세요!
md

2. 결과

기본 글자를 적어봅니다.

문단 나누기는 1번 띄어쓰기를 해주세요!

italic과 bold체

1. 사용법

**bold text**

_italic text_

_**bold_italic text**_
md

2. 결과

bold text

italic text

bold_italic text

링크

1. 사용법

[테스트 링크 ✅](link-url)
md

2. 결과

테스트 링크 ✅

1. 사용법

# 제목1

## 제목2

### 제목3
md

2. 컴포넌트

• H1
• H2
• H3

H3이상으로 깊게 제목을 세분화 시키면 글의 구조가 다소 복잡해지는 단점이 존재합니다

3. Table of content 컴포넌트

• H1과 자식 H2만 포함합니다
• 정상적인 TOC 이용을 위해, 제목의 글은 순수 텍스트만 포함 해야합니다

🚫 # _Head_ **is** `head`
✅ # Head is head
md

열거형

1. 사용법

1. I like apple
2. I like banana
3. I love myself
md

2. 결과

   1. I like apple
   2. I like banana
   3. I love myself

비열거형

1. 사용법

-   typescript
    1. concrete
        - love it
-   nextjs
    -   awsome
-   styled-components
md

2. 결과

• typescript
  1. concrete
     • love it
• nextjs
  • awsome
• styled-components

1. 사용법

> 기본 인용문
md

> 경고 인용문:warning
md

> 질문 인용문:question
md

> 노트 인용문:note
md

2. 결과

💡

기본 인용문

🔥

경고 인용문

🧐

질문 인용문

✒️

노트 인용문

개발 블로그를 위해 코드블럭은 필수적입니다

Next your home에서는 실용적이며 커스텀 가능한 코드 component를 갖추고 있습니다

inline code 사용법

• 사용법

`inline code`
md

• 결과

inline code

code block 사용법

1. 사용법

```language
language code
```
md

2. 코드 블럭 설정 옵션

   • 언어 ( required ): language
   • 강조 ( optional ): {singleLineNumber, startLineNumber-endLineNumber}
   • 줄 수 ( optional ): showLineNumber

인수 제공: language {lineNumber} showLineNumbers

```js {1,2-3} showLineNumbers
const favorites = {
    animal: "sea-otter 🦦",
    fruits: ["🍎", "🍏", "🍓", "🍑", "🍍"],
}
```
md

3. 결과

const favorites = {
    animal: "sea-otter 🦦",
    fruits: ["🍎", "🍏", "🍓", "🍑", "🍍"],
}
js

• next/image로 최적화 되어 있습니다
• 자동적으로 사진 크기를 조정합니다

사용법

![alt-text](static/external)
md

1. 사용법

---
md

2. 결과

1. 사용법

|             | rock     | scissors | paper    |
| ----------- | -------- | -------- | -------- |
| emoji       | 👊       | 🤞🏻       | ✋🏾       |
| possibility | `33.33%` | `33.33%` | `33.33%` |
md

2. 결과

remark-gfm을 통해 지원됩니다