如何在Docusaurus v2的src/pages页面渲染数学公式？

Docusaurus默认只给docs目录的文档启用数学公式渲染插件，pages目录的页面不会自动触发这些插件的处理，所以才会出现docs里公式正常显示、pages里只显示原始文本的情况。下面是两种解决办法：

方法一：全局配置扩展渲染范围（推荐） #

根据你用的数学渲染工具，修改docusaurus.config.js的配置，让插件同时处理pages目录的文件：

如果你用的是MathJax插件 #

找到插件配置块，把include路径扩展到pages：

module.exports = {
  plugins: [
    [
      'docusaurus-plugin-mathjax',
      {
        include: ['**/*.md', '../src/pages/**/*.md'], // 覆盖docs和pages的所有md文件
        mathjax: {
          // 你的MathJax原有配置
        }
      }
    ]
  ]
};

如果你用的是KaTeX的remark/rehype插件 #

在presets的pages字段里添加和docs一样的remark/rehype插件，同时确保引入KaTeX样式：

module.exports = {
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        docs: {
          remarkPlugins: [require('remark-math')],
          rehypePlugins: [require('rehype-katex')],
        },
        pages: {
          remarkPlugins: [require('remark-math')],
          rehypePlugins: [require('rehype-katex')],
        },
      }
    ]
  ],
  stylesheets: [
    {
      href: 'https://cdn.jsdelivr.net/npm/katex@0.13.24/dist/katex.min.css',
      type: 'text/css',
    },
  ],
};

方法二：单个页面手动引入渲染脚本 #

如果只是个别pages文件需要渲染公式，可以在文件开头直接添加渲染脚本，不用改全局配置：

---
title: Test
---

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

# Test

Some formula: $\sqrt{a^2+b^2}$

最后一步 #

修改完配置或者页面内容后，一定要重启Docusaurus的本地服务（先停掉原来的npm start，再重新启动），新配置才会生效。

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