渲染表格
本指南介绍了在 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()