React Markdown嵌套HTML表格时KaTeX渲染异常问题排查

问题原因 #

当使用 rehypeRaw 插件时，HTML 标签内的内容会被直接解析为 HTML 文本节点，不会经过 remarkMath 等 remark 插件的处理。remarkMath 仅处理原生 markdown 语法中的内容，HTML 标签内部的文本默认不会被当作 markdown 解析，导致其中的 LaTeX 语法无法被识别转换，最终保留原始的美元符号。

解决方案 #

方案一：自定义 rehype 插件处理 HTML 内的 markdown #

通过编写自定义 rehype 插件，遍历 HTML 语法树（HAST），将指定元素（如表格单元格）内的文本重新解析为 markdown，确保 LaTeX 语法被正确处理。

步骤1：编写自定义插件

import { unified } from 'unified';
import remarkParse from 'remark-parse';
import remarkMath from 'remark-math';
import remarkGfm from 'remark-gfm';
import remarkRehype from 'remark-rehype';

// 自定义插件：处理HTML元素内的markdown内容
const rehypeProcessHtmlContent = () => {
  return (tree) => {
    const traverse = (node) => {
      if (node.type === 'element') {
        // 针对表格单元格元素处理
        if (['td', 'th'].includes(node.tagName)) {
          // 收集元素内的所有文本
          let text = '';
          node.children.forEach(child => {
            if (child.type === 'text') text += child.value;
          });
          
          if (text) {
            // 将文本解析为markdown并转换为HAST
            const processedTree = unified()
              .use(remarkParse)
              .use(remarkGfm)
              .use(remarkMath)
              .use(remarkRehype, { allowDangerousHtml: true })
              .parse(text);
            
            // 替换原元素的子内容为处理后的结果
            node.children = processedTree.children;
          }
        }
        // 递归处理子节点
        node.children.forEach(traverse);
      }
    };
    traverse(tree);
  };
};

步骤2：修改组件使用插件

import React from "react";
import "katex/dist/katex.min.css";
import Markdown from "react-markdown";
import rehypeRaw from "rehype-raw";
import rehypeKatex from "rehype-katex";
import remarkGfm from "remark-gfm";
import remarkMath from "remark-math";
import { rehypeProcessHtmlContent } from './your-plugin-path'; // 导入自定义插件

const RenderContent = ({ content }) => {
  const markdownContent = `<table border='1'>
    <tr>
    <td colspan='1'>A1</td>
    <td colspan='1'>_latex$$ 0λ/ $$latex_ Test</td>
    </tr>
    </table>
  `.replace(/_latex\$\$(.*?)\$\$latex_/g, "$$$1$");
    
  return (
    <Markdown
      remarkPlugins={[remarkGfm, remarkMath]}
      rehypePlugins={[
        rehypeRaw, 
        rehypeProcessHtmlContent, // 加入自定义插件
        rehypeKatex
      ]}
    >
      {markdownContent}
    </Markdown>
  );
};

export default RenderContent;

方案二：改用 markdown 表格（简化方案） #

如果不需要复杂的 HTML 表格特性，直接使用 markdown 表格可以避免该问题，因为 markdown 表格的内容会被 remark 插件正常处理：

| A1 | $$0λ/$$ Test |
|---|---|

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