React中ReactMarkdown与MathJax结合无法渲染LaTeX问题求助

问题原因 #

你当前把ReactMarkdown嵌套在MathJax组件内，但ReactMarkdown会异步将Markdown转换为HTML并更新DOM，而MathJax仅在组件初始挂载时扫描一次DOM，后续生成的LaTeX表达式不会被自动处理。

解决方案 #

方案一：使用ReactMarkdown的rehype插件（推荐） #

通过remark-math和rehype-mathjax插件，让ReactMarkdown在渲染过程中直接处理LaTeX表达式，无需额外的MathJax上下文组件。

1. 安装依赖

npm install remark-math rehype-mathjax

2. 修改组件代码

import ReactMarkdown from 'react-markdown';
import remarkMath from 'remark-math';
import rehypeMathjax from 'rehype-mathjax';

export const ContentDetails = ({ content }) => {
  const ConvertToHtml = ({ markdownContent }) => {
    return (
      <ReactMarkdown
        remarkPlugins={[remarkMath]}
        rehypePlugins={[rehypeMathjax]}
      >
        {markdownContent}
      </ReactMarkdown>
    );
  };

  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>
  );
};

方案二：手动触发MathJax重新排版 #

如果坚持使用better-react-mathjax，可以在ReactMarkdown渲染完成后，手动调用MathJax的排版方法，确保LaTeX内容被处理。

修改ConvertToHtml组件：

import { useEffect, useRef } from 'react';
import { MathJaxContext, MathJax } from 'better-react-mathjax';
import ReactMarkdown from 'react-markdown';

export const ContentDetails = ({ content }) => {
  const config = {
    loader: { load: ["[tex]/html"] },
    tex: {
      packages: { "[+]": ["html"] },
      inlineMath: [["$", "$"]],
      displayMath: [["$$", "$$"]]
    }
  };

  const ConvertToHtml = ({ markdownContent }) => {
    const containerRef = useRef(null);

    useEffect(() => {
      // DOM更新后触发MathJax排版
      if (window.MathJax && containerRef.current) {
        window.MathJax.typeset([containerRef.current]);
        // 清理函数避免重复排版
        return () => window.MathJax.typesetClear([containerRef.current]);
      }
    }, [markdownContent]);

    return (
      <MathJaxContext config={config} version={3}>
        <div ref={containerRef}>
          <ReactMarkdown>{markdownContent}</ReactMarkdown>
        </div>
      </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>
  );
};

说明 #

• 方案一更贴合React渲染逻辑，无需手动操作DOM，优先推荐。
• 方案二适合需要保留原有MathJax配置的场景，需确保better-react-mathjax正确加载全局MathJax对象。

内容的提问来源于stack exchange，提问作者Abde Ae