MathJax not rendering LaTeX in React with ReactMarkdown

Question

I'm currently facing an issue with MathJax and ReactMarkdown in my React application. I've set up a component that uses better-react-mathjax to render Markdown content, including LaTeX math expressions. However, I'm encountering difficulties as only the Markdown content is being rendered, and the LaTeX expressions are not processed by MathJax.

export const ContentDetails = ({ content }) => {

  const config = {
    loader: { load: ["[tex]/html"] },
    tex: {
      packages: { "[+]": ["html"] },
      inlineMath: [["$", "$"]],
      displayMath: [["$$", "$$"]]
    }
  };

  const ConvertToHtml = ({ markdownContent }) => {
    return (
      <MathJaxContext config={config} version={3}>
        <MathJax>
          <ReactMarkdown>
            {markdownContent}
          </ReactMarkdown>
        </MathJax>
      </MathJaxContext>
    )

  }

  return (

    <div className='pt-[80px] mb-[80px]'>
      <div className='ml-[60px] mr-[60px] space-y-8'>
        {content?.map((contentItem, index) => (
          <div
            key={index}
            className='mr-[140px] ml-[140px] space-y-6 font-amiri text-right flex flex-col items-end'
          >
            <h1 className='mr-[12px] text-h3'>{contentItem.title}</h1>
            <div className='mr-[12px] text-h6 leading-10 text-[#464848]'>
              <ConvertToHtml markdownContent={contentItem.content_body} />
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

I have already tested that both Mathjax and Reactmarkdown work fine when separate. The issue only raises when I combine them.

Answer 1

better-react-mathjax is not adapted to being used together with react-markdown and vice versa so it is expected that it requires some fiddling to make it work. MathJax itself works by typesetting the DOM and better-react-mathjax leverages this functionality for use with React (which manipulates the DOM in a very particular way). react-markdown also manipulates content and the DOM to render markdown correctly and if the resulting format is not in a regular DOM representation with the MathJax delimiters preserved, MathJax will not be able to help you out. There may also be a race condition between the processing of math and the processing of markdown whereby one of the two gets invalidated by the other.

A thorough and controlled solution would thereby involve hooking into the react-markdown rendering process and maybe add some wrapper (MathJax component or similar). Initially, one can also of course just attempt to wrap the entire Markdown component in a MathJax component to see if it works.

It turns out that my initial attempts work well after just wrapping the Markdown component in a MathJax component, so if this doesn't work for you, what happens? Can you create a sandbox where the problem is shown? As I said, I would, if the problem can't be solved, try to hook into the react-markdown rendering process and try to add the MathJax functionality there, either by means of a MathJax component or extract the MathJaxBaseContext and then manually typeset with it, although such complicated use should probably not be necessary here.

Here is a sandbox where it works out well: https://codesandbox.io/p/sandbox/user-example-so77769966-q352j2

PS! It seems you're including the MathJaxContext in something that looks like a reusable component, the MathJaxContext should only exist ONCE in an app and should wrap the entire app (https://github.com/fast-reflexes/better-react-mathjax?tab=readme-ov-file#usage) DS