Math blocks

You can render math blocks via remark-math and rehype-katex. remark-math parses math blocks and rehype-katex transforms the blocks into html elements with classes for styling.Also, you need to apply css style of KaTeX by yourself to render them properly.

First, link a stylesheet and use the $ syntax:

<!-- index.mdx -->
<!-- Apply katex css -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/katex@0.11.0/dist/katex.min.css"
  integrity="sha384-BdGj8xC2eZkQaxoQ8nSLefg4AV4/AwB3Fj+8SUSo7pnKP6Eoy18liIKTPn9oBYNG"
  crossOrigin="anonymous"
/>
Lift($L$) can be determined by Lift Coefficient ($C_L$) like the following equation.
$$
L = \frac{1}{2} \rho v^2 S C_L
$$

Then, configure webpack by using the remark-math and rehype-katex plugins:

// webpack.config.js
const remarkMath = require('remark-math')
const rehypeKatex = require('rehype-katex')
module.exports = {
  module: {
    // ...
    rules: [
      // ...
      {
        test: /.mdx?$/,
        use: [
          'babel-loader',
          {
            resolve: '@mdx-js/loader',
            options: {
              remarkPlugins: [remarkMath],
              rehypePlugins: [rehypeKatex]
            }
          }
        ]
      }
    ]
  }
}

If you’re using MDX with Next.js, you can use @next/mdx with the following configuration:

// next.config.js
const remarkMath = require('remark-math')
const rehypeKatex = require('rehype-katex')
const withMDX = require('@next/mdx')({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: [remarkMath],
    rehypePlugins: [rehypeKatex]
  }
})
module.exports = withMDX({
  pageExtensions: ['js', 'jsx', 'md', 'mdx']
})