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-
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
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 |
'문서 정리 프레임워크 > Nextra' 카테고리의 다른 글
[Nextra] existSync is not a function (0) | 2024.08.11 |
---|---|
[Next.js, Nextra] @next/font 패키지 경고 해결 (0) | 2024.08.09 |
[Nextra] Nextra에서 이미지 파일 사용하기 (0) | 2023.06.25 |
[Nextra] 구문 강조 사용하기 (0) | 2023.06.24 |
[Nextra] Next.js 링크 사용하기 (0) | 2023.06.23 |
댓글