Docusaurus集成KaTeX渲染LaTeX公式出现重复显示问题如何解决

出现公式渲染后重复显示原始源码的问题，是两层解析规则冲突导致的：

• 已集成的KaTeX渲染插件会自动识别$$包裹的块级数学公式，完成公式渲染
• 编写公式时额外给公式套了<pre><code class="lang-latex">的代码块包裹标签，Docusaurus的Markdown/MDX解析器会把这部分内容识别为普通代码块，在KaTeX完成公式渲染后，又将原始LaTeX源码作为代码块内容输出在页面上，最终形成了“上方是正确渲染的公式、下方重复显示源码”的效果。

另外源码里对齐符号写的是HTML转义后的&，这个问题也会导致公式对齐失效，需要一并修正。

• 移除公式外层所有<pre>、<code>相关的代码块包裹标签，不要把LaTeX公式放在代码块语法中，直接在Markdown/MDX文件中写入$$包裹的公式内容即可。
  修正后的正确公式写法：

$$
\begin{aligned}
    \begin{split}    
        u &= u^0(x,y)+z\varphi(x,y)  \\
        v &= v^0(x,y)+z\theta(x,y) \\
        w &= w^0(x,y)
    \end{split}
    \tag{1.1}
\end{aligned}
$$

注意：将源码中转义的&替换为原始的对齐符号&，否则公式对齐功能会失效。

• 检查docusaurus.config.js中的插件配置，避免重复引入数学公式解析规则，配置需满足以下要求：
  • 在docs、blog、pages三个模块的remark插件列表中加入数学公式解析插件
  • 对应模块的rehype插件列表中加入KaTeX渲染插件，可设置strict: false兼容非标准LaTeX写法
  • 在全局样式表配置项中引入本地安装的对应版本KaTeX的CSS样式文件，不要重复引入多版本样式
• 如果使用MDX格式编写文档，注意不要在公式块前后添加多余的HTML包裹标签，也不要在$$符号和公式内容之间加不必要的空行，避免解析器将公式识别为普通文本节点。

完成以上调整后重启Docusaurus开发服务，清空浏览器缓存后即可看到正常渲染效果，不会再出现重复的源码内容。

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