终于搞定 MathJax 公式渲染：一场与 Hexo + AnZhiYu 主题的艰难拉锯战
终于搞定 MathJax 公式渲染：一场与 Hexo + AnZhiYu 主题的艰难拉锯战
Wang YinXi终于搞定 MathJax 公式渲染：一场与 Hexo + AnZhiYu 主题的艰难拉锯战
作者：一个差点被前端折磨疯的蒟蒻
时间：2025年10月9日深夜
状态：精疲力尽但狂喜中
关键词：MathJaxHexoAnZhiYu$$$…$$$<script type="math/tex">Pjaxtex-chtml.js公式渲染
🧨 起因：一个简单的愿望
我只是想在博客里写一行数学公式：
结果，整整一天，它始终空白。
不是报错，不是乱码，而是——什么都没有。
像被宇宙吞噬了一样。
🔍 第一阶段：以为是 MathJax 没加载
我检查了：
- ✅
MathJax.version返回'3.2.2' - ✅ 网络面板显示
tex-chtml.js加载成功 - ✅ 手动执行
MathJax.typeset()依然空白
结论：MathJax 装了，但没干活。
🕵️♂️ 第二阶段：发现罪魁祸首 —— <script type="math/tex">
查看生成的 HTML，我惊了：
原来，AnZhiYu 主题自动把 $$$…$$$ 转成了 <script> 标签！
而问题在于：
tex-chtml.js 根本不处理 <script type="math/tex">！
它只认页面中的 $$$…$$$ 文本。
我尝试换成 tex-mml-chtml.js（唯一支持 <script> 的包），
结果又遇到新问题：页面被注入了两个 MathJax 脚本，互相冲突，彻底罢工。
💥 第三阶段：放弃幻想，回归本质
我意识到：
不要让主题”帮忙”转换公式！
它的好心，是我的噩梦。
于是，我决定：
- 关闭主题所有数学支持
- 保留 $$$…$$$ 原始文本
- 用最干净的 MathJax 配置直接渲染
✅ 终极解决方案（四步走）
第一步：关闭 AnZhiYu 的数学功能
在 source/_data/anzhiyu.yml 中添加：
math:
enable: false
mathjax:
enable: false
🚫 这一步阻止了主题把 $$$…$$$ 转成 <script>。
第二步：卸载所有数学相关插件
npm uninstall hexo-math hexo-renderer-mathjax
🧹 清理潜在干扰源。
第三步：用 `` 包裹公式（可选但推荐） {% raw %} ∫ 0 ∞ e −x 2 dx= 2 π {% endraw %}
🔒 防止 Hexo 渲染器对 _、^、\ 等字符进行转义。
第四步：注入极简 MathJax 脚本
创建 scripts/mathjax.js：
/ global hexo /
hexo.extend.injector.register(‘body_end’, `
, 'default');
✅ 使用tex-chtml.js`（轻量、高效、专为文本公式设计）
✅ 自动渲染，支持 Pjax 无刷新跳转
🎉 结果：公式终于显示了！
生成的 HTML 是干净的：
{% raw %} y=x 2 {% endraw %}
MathJax 扫描到 $$$…$$$，正确渲染为数学公式。
完美！
📌 经验总结
| 教训 | 正确做法 |
|---|---|
| 不要相信主题的”自动公式支持” | 手动控制，关闭一切自动转换 |
<script type="math/tex"> 是坑 |
坚持用 $$$…$$$ 文本 |
| MathJax 包要选对 | tex-chtml.js 足够，无需 mml |
| Pjax 不是问题 | MathJax 3 默认支持动态内容 |
❤️ 致谢
感谢 Qwen 在我崩溃边缘一次次耐心分析，
感谢 MathJax 团队提供强大工具，
感谢自己没放弃——终于他妈的好了！
附：现在我可以安心写 50 阶导数了
——《殊途同归：求解50阶导数》即将更新 📐
