MathJax 未使用 ReactMarkdown 在 React 中渲染 LaTeX

Question

我目前在 React 应用程序中面临 MathJax 和 ReactMarkdown 的问题。我已经设置了一个使用 better-react-mathjax 来渲染 Markdown 内容的组件，包括 LaTeX 数学表达式。但是，我遇到了困难，因为仅渲染 Markdown 内容，而 MathJax 不处理 LaTeX 表达式。

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

我已经测试过，Mathjax 和 Reactmarkdown 分开时都可以正常工作。仅当我将它们组合起来时，问题才会出现。

Answer 1

better-react-mathjax

不适合与

react-markdown

一起使用，反之亦然，因此预计需要一些调整才能使其工作。 MathJax 本身通过排版 DOM 来工作，并且

better-react-mathjax

利用此功能与 React 一起使用（它以非常特殊的方式操作 DOM）。

react-markdown

还可以操作内容和 DOM 以正确渲染 markdown，如果生成的格式不是保留 MathJax 分隔符的常规 DOM 表示形式，MathJax 将无法帮助您。数学处理和降价处理之间也可能存在竞争条件，其中两者之一会被另一个失效。

一个彻底且受控的解决方案将涉及挂钩到

react-markdown

渲染过程，并可能添加一些包装器（

MathJax

组件或类似组件）。最初，当然也可以尝试将整个

Markdown

组件包装在

MathJax

组件中，看看它是否有效。

事实证明，我最初的尝试在将

Markdown

组件包装在

MathJax

组件中后效果很好，所以如果这对您不起作用，会发生什么？您可以创建一个显示问题的沙箱吗？正如我所说，如果问题无法解决，我会尝试挂钩

react-markdown

渲染过程并尝试在其中添加

MathJax

功能，无论是通过

MathJax

组件还是提取

 MathJaxBaseContext

，然后用它手动排版，尽管这里可能不需要这么复杂的使用。

这是一个效果很好的沙箱：https://codesandbox.io/p/sandbox/user-example-so77769966-q352j2

PS！看来您将

MathJaxContext

包含在看起来像可重用组件的东西中，

MathJaxContext

应该只在应用程序中存在一次，并且应该包装整个应用程序（https://github.com/fast-reflexes/ better-react-mathjax?tab=readme-ov-file#usage) DS