Breathnote
next-mdx-remoteに数式変換処理を挟む

next-mdx-remoteに数式変換処理を挟む

このブログは、next-mdx-remoteというパッケージを使い、ヘッドレスCMSから受け取ったマークダウンデータをJSXに変換しています。

next-mdx-remoteは非常に素晴らしいパッケージですが、数式の変換と表示に対応していません。ということで、別のパッケージを噛ませることで対応しました。

本記事では、実装の過程で詰まった箇所を記録しておきます。

実装例

remark-mathとrehype-katexをプロジェクトに追加します。

shell
yarn add -D remark-math
yarn add -D rehype-katex

next-mdx-remoteのプラグインオプションに上記2つを追加します。さらに、数式をスタイリングするため、スタイルシートをCDNで読み込みます。

pages/posts/[slug].tsx
const remarkMath = require('remark-math')
const rehypePrism = require('@mapbox/rehype-prism')
const rehypeKatex = require('rehype-katex')

const Posts: NextPage<Props> = ({ post }) => {
  return (
    <>
      <Head>
        <link
          rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css"
          integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X"
          crossOrigin="anonymous"
        />
      </Head>
      <Article post={post} body={body} />
    </>
  )
}

export const getStaticProps: GetStaticProps = async (context) => {
  post = {
    ...post,
    body: await renderToString(post.body, {
      components,
      mdxOptions: {
        remarkPlugins: [remarkMath], // 追加
        rehypePlugins: [rehypePrism, rehypeKatex], // 追加（rehypeKatex）
      },
    }),
  }
}

これだけです。

変換前
$$
L = \frac{1}{2} \rho v^2 S C_L
$$

という文字が、

L=12ρv2SCLL = \frac{1}{2} \rho v^2 S C_L

という感じで変換、表示されます。