表格渲染

本指南涵盖了在 MDX 中渲染表格的不同方式，包括 GFM 语法和原生 HTML 标签。

GFM 语法

在 Markdown 中，推荐使用 GFM 语法  来编写表格。

| left   | center | right |
| :----- | :----: | ----: |
| foo    |  bar   |   baz |
| banana | apple  |  kiwi |

will be rendered as:

原生 HTML 表格

如果您尝试使用原生 HTML 元素 <table>、<thead>、<tbody>、<tr>、<th> 和 <td> 来渲染表格，您的表格将不会被样式化，因为 MDX  不会用 useMDXComponents() 提供的组件替换原生 HTML 元素¹。

[!TIP] 相反，请使用通过 nextra/components 提供的内置 <Table> 组件。

更改默认行为

如果您想使用标准 HTML 元素来创建表格，但希望它们使用 useMDXComponents() 提供的组件样式¹，您可以通过配置 Nextra 来实现这一点。

要实现这一点，需要向 Nextra 函数传递 whiteListTagsStyling 选项，包含您想要替换的标签数组。

以下是 next.config.mjs 文件中的配置示例：

import nextra from 'nextra'
 
const withNextra = nextra({
  whiteListTagsStyling: ['table', 'thead', 'tbody', 'tr', 'th', 'td']
})
 
export default withNextra()

在此示例中，标签 <table>、<thead>、<tbody>、<tr>、<th> 和 <td> 将被替换为相应的 MDX 组件，从而允许自定义样式。