MDX atom component means a core rendering component of MDX

Find out MDX component on the official site

💡

src/components/MDXAtoms contains all components

Basic handwriting

1. How to use

basic text
md

2. Results

basic text

Italic and bold

1. How to use

**bold text**

_italic text_

_**bold_italic text**_
md

2. Results

bold text

italic text

bold_italic text

Link

1. How to use

[link-text](link-url)
md

2. Results

link-text

1. How to use

# Title 1

## Title 2

### Title 3
md

2. Components

• H1
• H2
• H3

There is a disadvantage that the structure of the text becomes somewhat complicated if the title is deeply subdivided beyond H3

3. Table of content component

• Only H1 and H2 are included
• For normal use of TOC, the text of the title must contain only pure text

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

Ordered List

1. How to use

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

2. Results

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

Unordered List

1. How to use

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

2. Results

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

1. How to use

> Basic Quotes
md

> Warning quote:warning
md

> Question quote:question
md

> Note Quotes:note
md

2. Results

💡

Basic Quotes

🔥

Warning quote

🧐

Question quote

✒️

Note Quotes

Code blocks are essential for dev blogs

Next your home has practical and customizable code components

How to use inline code

1. How to use

`inline code`
md

2. Results

inline code

How to use code block

1. How to use

```language
language code
```
md

2. Code Block Settings Options

   • Language ( required ): language
   • Highlight ( optional ): {singleLineNumber, startLineNumber-endLineNumber}
   • Number of lines ( optional ): showLineNumber

Argument: language {lineNumber} showLineNumbers

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

3. Results

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

• Optimized with next/image
• Automatically fit the image size

How to use it

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

1. How to use

---
md

2. Results

1. How to use

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

2. Results

Supported via remark-gfm