[Nextra] 마크다운 파일(.md) 테이블 사용(<table></table>)

Nextra에서 .md파일에서 테이블 사용하는 방법

---

1. GFM구문으로 .md파일에서 테이블 생성

| left   | center | right |
| :----- | :----: | ----: |
| 1    |  2   |   3 |
| a | b  |  c |

 

결과

left	center	right
1	2	3
a	b	c

 

---

※ GFM 구문이란?

https://github.github.com/gfm/#tables-extension-

GitHub Flavored Markdown Spec

 

---

 

2. 동적 테이블 + { } 추가

{
    <table>
      <thead>
        <tr>
          <th>left</th>
          <th>center</th>
          <th>right</th>
        </tr>
      </thead>
      <tbody>
        {[
          { one: '1', two: '2', two: '3' },
          { one: 'a', two: 'b', two: 'c' }
        ].map(item => (
          <tr key={item.one}>
            <td>{item.one}</td>
            <td>{item.two}</td>
          </tr>
        ))}
      </tbody>
    </table>
}

 

결과

left	center	right
1	2	3
a	b	c

 

 

---

 

3. HTML 리터럴 테이블

 

1. remark-mdx-disable-explicit-jsx패키지 설치

npm i remark-mdx-disable-explicit-jsx
// or
pnpm add remark-mdx-disable-explicit-jsx
// or
yarn add remark-mdx-disable-explicit-jsx
// or
bun add remark-mdx-disable-explicit-jsx

 

 

2. 파일 nextra내부의 next.config.mjs에서 아래 플러그인 구성

import nextra from 'nextra'
import remarkMdxDisableExplicitJsx from 'remark-mdx-disable-explicit-jsx'
 
const withNextra = nextra({
  theme: 'nextra-theme-docs',
  themeConfig: './theme.config.tsx',
  mdxOptions: {
    remarkPlugins: [
      [
        remarkMdxDisableExplicitJsx,
        { whiteList: ['table', 'thead', 'tbody', 'tr', 'th', 'td'] }
      ]
    ]
  }
})
 
export default withNextra()

 

 

3. HTML리터럴 테이블 사용

<table>
  <thead>
    <tr>
      <th>left</th>
      <th align="center">center</th>
      <th align="right">right</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td align="center">2</td>
      <td align="right">3</td>
    </tr>
    <tr>
      <td>a</td>
      <td align="center">b</td>
      <td align="right">c</td>
    </tr>
  </tbody>
</table>

 

결과

left	center	right
1	2	3
a	b	c

 

---

 

※ 위와 같이 사용해야 하는 이유

1. MDX2는 문자 그대로 HTML 요소를 <MDXprovider />로 대체하지 않는다.
2. Tailwind CSS의 제작자인 Adam Wathan은 MDX2에서 다음과 같은 이름을 붙일 수 있는 탈출 해치를 갖기 위해 문제를 제출했다.

https://github.com/mdx-js/mdx/issues/821

Don't replace literal HTML elements with MDXProvider · Issue #821 · mdx-js/mdx

3. 리터럴 HTML 태그가 아닌 마크다운 태그만 변환해야 한다.
4. 테이블 헤더는 Nextra의 MDX 구성 요소 <tr />, <th /> 및 <td />로 대체되지 않았기 때문에 스타일이 없다.

5. 같은 이유로 <table /> 리터럴이 대체되지 않고 기본 마진 상단 또는 mt-6이 없다.

 

---

 

4. 기타 옳바르지 않은 결과들

1. remark-mdx-disable-explicit-jsx패키지를 적용하지 않고 HTML 리터럴 테이블로 생성했을 때

<table>
  <thead>
    <tr>
      <th>left</th>
      <th align="center">center</th>
      <th align="right">right</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td align="center">2</td>
      <td align="right">3</td>
    </tr>
    <tr>
      <td>a</td>
      <td align="center">b</td>
      <td align="right">c</td>
    </tr>
  </tbody>
</table>

 

결과

 

 left center right

1         2          3

a         b          c

 

 

 

2. 동적 테이블만 적용했을 때

<table>
  <thead>
    <tr>
      <th>left</th>
      <th>center</th>
      <th>right</th>
    </tr>
  </thead>
  <tbody>
    {[
      { one: '1', two: '2', two: '3' },
      { one: 'a', two: 'b', two: 'c' }
    ].map(item => (
      <tr key={item.one}>
        <td>{item.one}</td>
        <td>{item.two}</td>
      </tr>
    ))}
  </tbody>
</table>

 

                             left                                                         center                                                        right

1	2	3
a	b	c