渲染表格
本指南涵蓋在 MDX 中渲染表格的不同方法，包括 GFM 語法和原生 HTML 標籤。
GFM 語法
在 Markdown 中，建議使用 GFM 語法 來撰寫表格。
MDX
| left | center | right |
| :----- | :----: | ----: |
| foo | bar | baz |
| banana | apple | kiwi |將渲染為
| 左 | 置中 | 右 |
|---|---|---|
| foo | bar | baz |
| banana | apple | kiwi |
原生 HTML 表格
如果您嘗試使用原生 HTML 元素 <table>、<thead>、<tbody>、<tr>、<th> 和 <td> 來渲染表格，您的表格將不會有任何樣式，因為 MDX 不會將原生 HTML 元素替換為 useMDXComponents() 所提供的元件。
用法
MDX
<table>
<thead>
<tr>
<th>Country</th>
<th>Flag</th>
</tr>
</thead>
<tbody>
<tr>
<td>France</td>
<td>🇫🇷</td>
</tr>
<tr>
<td>Ukraine</td>
<td>🇺🇦</td>
</tr>
</tbody>
</table>範例
| 國家 | 國旗 |
|---|---|
| 法國 | 🇫🇷 |
| 烏克蘭 | 🇺🇦 |
變更預設行為
如果這件事仍然讓您感到困惑，並且您想要為表格使用一般的原生 HTML 元素，請執行以下操作
安裝 remark-mdx-disable-explicit-jsx 套件
npm i remark-mdx-disable-explicit-jsx設定
在 next.config.mjs 檔案中的 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()