Inline equations rendered as block equations

[batchor]

Related to vercel/next.js#74625

I'm using nextjs 15 + mdx + rehypeMathjax to write math-heavy blog articles.

However, the inline equations are rendered as block ones no matter how I config the inline delimiters in mathjax.

Both $f(x)$ and $$f(x)$$ are rendered into block equation html codes as below:

The behavior of the options to the rehype-mathjax plugn is weird.

1. First of all, the options is working because I got different results with and without tag="ams".
2. However, without inlineMath: [["$", "$"]],, I can still render block equations with $f(x)$, which is not expected. Because the delimiter "$" is disabled by default in mathjax, according to the official document.
3. Not matter what delimiters I use in inlineMath: [["$", "$"]], (e,g. inlineMath: [["@", "@"]],), I can ONLY get correct render with $.

My next.config.mjs:

import createMDX from '@next/mdx'
import remarkMath from "remark-math"
import remarkParse from 'remark-parse'
import remarkGfm from 'remark-gfm'
import rehypeMathjax from 'rehype-mathjax'
import rehypeSlug from 'rehype-slug'


/** @type {import('next').NextConfig} */
const nextConfig = {}


const mathjaxConfig = {
    tex: {
        tags: "ams",
        inlineMath: [["$", "$"]],
    },
    tex2jax: {
        processEscapes: true
    }
}

const withMDX = createMDX({
    extension: /\.mdx$/,
    options: {
        remarkPlugins: [[remarkParse, {fragment: true}], remarkMath],
        rehypePlugins: [rehypeSlug, [rehypeMathjax, mathjaxConfig]]
    }
})

export default withMDX(nextConfig)

[wooorm]

Hi! See the tools you are using, and read there readmes.
Your definition of “block” vs “inline” is not the definitions that these tools use.
That is the case, because there is no standard for math. And that definition, is not a good definition, in my opinion.
The section in question is: https://github.com/remarkjs/remark-math/blob/main/packages/remark-math/readme.md#syntax.

[batchor]

Thanks for your response.

I'm using nextjs15 and mdx. Actually, I did read their readmes, but they are pretty simple without in-depth details.

I debug-ed for a while and found that the rehype-mathjax plugin does not recognize the inlineMath: [["$," "$"]] option because no matter what I set, I always get the same rendering results.

I don't know if this originates from the tools I use (nextjs+mdx) which override the options, or rehype-mathjax itself does not care the option at all.