渲染表格

本指南介绍了在 MDX 中渲染表格的不同方式，包括 GFM 语法 和字面 HTML 标签。

GFM 语法

在 Markdown 中，建议通过 GFM 语法  来编写表格。

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

将渲染为：

字面 HTML 表格

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

更改默认行为

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

为此，将 whiteListTagsStyling 选项传递给 Nextra 函数， 包括您想要替换的标签数组。

以下是您的 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 组件，从而实现 自定义样式。