如何在ReactMarkdown中集成MathJax渲染数学公式？

1. 安装必要依赖 #

先安装核心包：

npm install react-markdown remark-math @mathjax/react

2. 实现可渲染Markdown+MathJax的组件 #

利用ReactMarkdown的components属性（替代旧版的renderers），结合remark-math识别数学公式，再交给@mathjax/react渲染：

import React from 'react';
import ReactMarkdown from 'react-markdown';
import remarkMath from 'remark-math';
import { MathJax } from '@mathjax/react';

// 配置MathJax，确保支持align等AMS环境
const mathJaxConfig = {
  loader: { load: ['input/tex', 'output/chtml'] },
  tex: {
    packages: {'[+]': ['ams']}, // 加载AMS扩展支持复杂公式环境
    inlineMath: [['$', '$'], ['\\(', '\\)']],
    displayMath: [['$$', '$$'], ['\\[', '\\]'], ['\\begin{align}', '\\end{align}']]
  }
};

const MarkdownWithMath = ({ content }) => {
  return (
    <MathJax.Provider config={mathJaxConfig}>
      <ReactMarkdown
        remarkPlugins={[remarkMath]}
        components={{
          // 处理块级公式（包括align环境）
          math: ({ children, ...props }) => {
            return <MathJax.Node formula={children} {...props} />;
          },
          // 处理行内公式
          inlineMath: ({ children, ...props }) => {
            return <MathJax.Node inline formula={children} {...props} />;
          }
        }}
      >
        {content}
      </ReactMarkdown>
    </MathJax.Provider>
  );
};

export default MarkdownWithMath;

3. 使用示例 #

import MarkdownWithMath from './MarkdownWithMath';

const App = () => {
  const markdownContent = `
这是行内公式：$\sum_{i=1}^n i = \\frac{n(n+1)}{2}$

下面是块级align公式：
\\begin{align}
\\text{good: } &\\sum_{i=1}^n i^3 = \\left(\\sum_{i=1}^n i\\right)^2. \\\\[1em]
\\text{bad: }  &\\sum_{i=1}^n i^3 = (\\sum_{i=1}^n i)^2.
\\end{align}
`;

  return <MarkdownWithMath content={markdownContent} />;
};

export default App;

关键说明 #

• remark-math会自动从Markdown中识别行内$...$、块级$$...$$以及\begin{align}这类LaTeX环境，转换为ReactMarkdown可识别的math/inlineMath节点。
• ReactMarkdown通过components属性自定义这两类节点的渲染逻辑，直接调用MathJax.Node处理公式。
• MathJax配置中加载ams包是支持align等复杂环境的核心。

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