mdx+rehypeMathjax: inline math equations are rendered as block

[batchor]

Summary

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:

I think the problem is that the options to the rehypeMathjax plugin seems to be not working. Because no matter what delimiters I set (e.g., inline math: [["#," "#"]]), the behavior does not change.

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)

Additional information

No response

Example

No response