テーブルのレンダリング

このガイドでは、GFM構文やリテラルHTMLタグなど、MDXでテーブルをレンダリングするさまざまな方法について説明します。

GFM構文

Markdownでは、GFM構文でテーブルを記述することをお勧めします。

MDX

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

は以下のようにレンダリングされます

左	中央	右
foo	bar	baz
バナナ	りんご	キウイ

リテラル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

pnpm add remark-mdx-disable-explicit-jsx

yarn add remark-mdx-disable-explicit-jsx

bun add 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()

LaTeX TypeScript