markdownのtable記法、ブラウザでの表示が崩れる

Gatsby4 では

Gatsby4 では、markdown での table 記法が、ブラウザできちんと表示されていました。

Gatsby5 だと表示が崩れる

Gatby4 から 5 にアップデートして、設定を特に変更せずにいたのですが、markdown での table 記法が、ブラウザで正常に表示されなくなっていました。

ググってみる

• Markdown の table が正しくパースされない #10

どうやら、remark-gfm を使うといいみたい…

では gatsby-plugin-mdx で、どう使えばいいのか…

• gatsby-plugin-mdx

以下の様な記述がありました。

MDX syntax differs from Markdown as it only supports CommonMark by default. Nonstandard markdown features like GitHub flavored markdown (GFM) can be enabled with plugins (see mdxOptions instructions).

mdxOptions

mdxOptions を使えば、いいっぽい。

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        mdxOptions: {
          remarkPlugins: [
            // Add GitHub Flavored Markdown (GFM) support
            require(`remark-gfm`),
          ],
        },
      },
    },
  ],
};

この様に設定して、gatsby develop をしても、表示は崩れたまま…

注意書きがあった

Please Note: Most of the remark ecosystem is ESM which means that packages like remark-gfm currently don’t work out of the box with Gatsby. You have two options until Gatsby fully supports ESM:

2 パターンあるみたいですが、今回は 1 の方法を試してみました。

npm install remark-gfm@^1

remark-gfm をインストールして、再度 gatsby develop してみると、

	旧ブログ	新ブログ
バージョン	3	4
読み込み可能ファイル	md	mdx

ブラウザでも正常に表示される様になりました。