Nextra 中文文档
Nextra 指南
高级
Rendering Tables

渲染表格

GFM 语法

在markdown中，最好通过 GFM语法 (opens in a new tab) 编写表格

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

将被渲染为：

leftcenterright
foobarbaz
bananaapplekiwi

HTML 表格

如果您尝试渲染以下 <table /> 元素：

Markdown
<table>
  <thead>
    <tr>
      <th>left</th>
      <th align="center">center</th>
      <th align="right">right</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>foo</td>
      <td align="center">bar</td>
      <td align="right">baz</td>
    </tr>
    <tr>
      <td>banana</td>
      <td align="center">apple</td>
      <td align="right">kiwi</td>
    </tr>
  </tbody>
</table>

你将会得到：

leftcenterright
foobarbaz
bananaapplekiwi
⚠️

对无CSS样式的表格感到困惑？我们在这里解释了为什么会发生这种情况。

动态表格

如何编写

想要渲染动态表格吗？您可以将嵌入式JavaScript表达式插入到您的表格中：

Markdown
<table>
  <thead>
    <tr>
      <th>Country</th>
      <th>Flag</th>
    </tr>
  </thead>
  <tbody>
    {[
      { country: 'France', flag: '🇫🇷' },
      { country: 'Ukraine', flag: '🇺🇦' }
    ].map(item => (
      <tr key={item.country}>
        <td>{item.country}</td>
        <td>{item.flag}</td>
      </tr>
    ))}
  </tbody>
</table>

将被渲染为：

CountryFlag
France🇫🇷
Ukraine🇺🇦
⚠️

对无CSS样式的表格感到困惑? 我们接下来将解释为什么会这样 👇

意外结果

表格与GFM语法表格相比看起来不同：

  1. 仅表体的子元素<tbody />受到样式化

  2. 表头未经样式化

  3. 表格顶部没有边距

为什么会发生这种情况

MDX2不会将字面HTML元素替换为<MDXProvider />。

Tailwind CSS的创建者Adam Wathan在MDX2中提交了一个问题 (opens in a new tab)， 希望有一些“例外”：

请只转换markdown标签，而不是字面HTML标签

表头看起来未经样式化，因为未替换为Nextra的MDX组件<tr />、<th />和<td />， 同样的原因<table />字面值未被替换，也没有默认的顶部边距mt-6。

修复方法

一次性修复

只需用大括号{和}包裹您的表格，例如

Markdown
{<table>
  ...
</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()
LaTeXTypeScript