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

[CuiJinku]

Hi @batchor , I use rehype-mathjax/chtml to solve the same problem:

import createMDX from '@next/mdx'
import remarkGfm from 'remark-gfm'
import remarkMath from 'remark-math'
import rehypeMathjaxChtml from 'rehype-mathjax/chtml'
import rehypeHighlight from 'rehype-highlight'

const withMDX = createMDX({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: [remarkGfm, remarkMath],
    rehypePlugins: [
      [rehypeMathjaxChtml, {
        chtml: {
          fontURL: 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/output/chtml/fonts/woff-v2'
        }
      }],
      rehypeHighlight,
    ],
  },
})

const nextConfig = {
  pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx'],
  output: 'export' as const,
  trailingSlash: true,
}

export default withMDX(nextConfig)