GLM-OCR Markdown渲染进阶：rehypeMathInHtml让LaTeX公式正确显示的完整指南

GLM-OCR Markdown渲染进阶rehypeMathInHtml让LaTeX公式正确显示的完整指南【免费下载链接】GLM-OCRGLM-OCR: Accurate × Fast × Comprehensive项目地址: https://gitcode.com/GitHub_Trending/gl/GLM-OCRGLM-OCR 是一款 Accurate × Fast × Comprehensive 的开源 OCR 模型识别结果会以 Markdown 形式输出。但在前端渲染这些结果时LaTeX 公式经常打不开——尤其是藏在 HTML 表格里的公式。本文带你搞懂前端里那个不起眼的插件 rehypeMathInHtml.ts它是如何让 Markdown 渲染链把 HTML 内部的$...$公式也正确画出来的。一、先弄懂问题为什么公式在 HTML 块里显示不出来GLM-OCR 识别数学文档时输出的 Markdown 里会有行内公式和块级公式。看官方示例 paper.md里面大量出现$$ \sum_{i1}^{n} x_i \frac{\partial R}{\partial x_i} dR $$前端渲染公式的流水线由四个插件组成在 MarkdownPreview.tsx 中注册插件职责短板remark-math把 Markdown 里的$...$标记为公式节点不解析原始 HTML 块内的公式rehype-raw把table等原始 HTML 转成标准节点转完后公式仍是纯文本rehypeMathInHtml扫描 HTML 节点内部的$...$并标记成公式本文主角rehype-katex把公式节点渲染成漂亮的 KaTeX 排版只认带language-math类名的节点 问题就出在这里remark-math只处理 Markdown 语法的公式一旦公式出现在td、table这类原始 HTML 里GLM-OCR 的表格识别结果常用 HTML 输出见 table.md整条链就没有人能把它转成公式了页面上只能看到一堆$x_{1}^{2}...$的乱码。rehypeMathInHtml正是补上这块缺口的胶水插件。二、rehypeMathInHtml 的三个核心能力打开 rehypeMathInHtml.ts 源码全文不到 160 行它的核心逻辑可以概括为三件事1️⃣ 递归遍历找出 HTML 里的文本节点插件注册的是一个transformer(tree)对整棵 HAST 语法树做递归walk。每遇到一个文本节点就尝试把其中的$拆开分类。2️⃣ 智能拆分行内公式、块级公式、转义美元符splitTextWithMath函数逐字符扫描支持三种语法行内公式$Emc^2$→ 生成language-mathmath-inline的 code 节点块级公式$$...$$→ 生成language-mathmath-display的 code 节点转义符\$→ 保留为字面量$绝不触发解析生成的节点恰好是rehype-katex认识的格式见 rehypeMathInHtml.ts#L132-L141于是后续 KaTeX 就能无缝接手渲染。3️⃣ 安全跳过代码块和脚本区域不碰源码中定义了 SKIP_TAGS 黑名单code、pre、kbd、samp、script、style、textarea。这个细节很重要GLM-OCR 的代码识别结果如 code.md里 HTML 标签大量存在如果连代码块里的$也去解析会把价格表达式、货币符号误伤成公式。跳过这些标签才敢放心让插件全局运行。三、性能与健壮性值得学习的两个细节快速路径Fast Pathif (!value.includes($)) return [{ type: text, value }]不含美元符的文本直接原样返回一行代码省掉整个扫描过程。大文档渲染时绝大多数文本节点都走这条快路径性能损耗几乎为零。奇偶反斜杠判断转义isEscapedAt通过数$前面连续反斜杠的个数来判断是否转义——奇数个 被转义。这种实现能正确处理\\$x$反斜杠本身被转义$x$仍是公式这类边界情况比简单的前缀匹配严谨得多。另外它还会跳过$$$$这种空公式块避免 KaTeX 报错。四、在项目中如何使用一次注册全局生效插件是标准 rehype 插件注册位置见 MarkdownPreview.tsx#L210-L215ReactMarkdown remarkPlugins{[remarkMath]} rehypePlugins{[rehypeRaw, rehypeMathInHtml, [rehypeKatex, katexOptions]]} {block.content} /ReactMarkdown⚠️顺序有讲究rehypeMathInHtml必须放在rehype-raw之后等 HTML 转完节点再扫描、rehype-katex之前先标记后渲染。插件链是顺序执行的换顺序公式就消失了。配套的 KaTeX 宽松配置MarkdownPreview.tsx#L24-L28也不容忽视throwOnError: false—— OCR 输出偶有残缺公式时降级为文本不炸页面strict: false—— 关闭严格模式警告容忍更多 LaTeX 变体公式渲染后的样式居中、间距等则定义在 markdown.css 中深色模式下也能正常显示。五、效果对照典型公式场景都能正确显示公式场景语法渲染效果行内公式$x^2$随文字排版 ✅块级公式$$\sum ...$$独立居中一行 ✅HTML 表格单元格内td$Emc^2$/td由 rehypeMathInHtml 兜底 ✅转义美元符\$5 的预算显示为$✅六、给新手的小结一句话定位rehypeMathInHtml是 GLM-OCR 前端里补全HTML 内部 LaTeX 公式渲染这块拼图的 rehype 插件。插件链心智模型remark-math管 Markdown、rehype-raw管 HTML、rehypeMathInHtml管两者夹缝里的公式、rehype-katex统一出图。想动手看看从 rehypeMathInHtml.ts 读起再对照 apps/frontend/README.md 里的技术栈说明半天就能完全吃透。想跑起来玩玩进入前端目录执行pnpm install pnpm dev上传一张带公式的 PDF看右侧 Markdown 面板里公式活过来。掌握了这套插件链你以后再遇到Markdown 里 HTML 表格渲染不出公式的问题直接照搬这个方案即可 。【免费下载链接】GLM-OCRGLM-OCR: Accurate × Fast × Comprehensive项目地址: https://gitcode.com/GitHub_Trending/gl/GLM-OCR创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考