Skip to content
MDX logo
v1.4.5GitHub logo

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']
})
Edit this page on GitHub
Previous:
Live code editor
Next:
Table of contents