PyQt5：QWebEngineView引用本地MathJax无法渲染LaTeX公式

云上老周

2026-8-26

解决PyQt5 QWebEngineView中本地MathJax渲染LaTeX公式的问题

1. 先把路径和加载方式搞对

先确认你的目录结构：主目录下有笔记本文件和mathjax文件夹，mathjax里的es5目录必须完整包含MathJax的核心文件。

如果是加载HTML字符串，一定要指定基础URL，否则相对路径会失效：

base_url = QUrl.fromLocalFile(os.path.abspath("./"))
webview.setHtml(你的HTML内容, base_url)

HTML里的MathJax脚本引用要对应本地路径：

<script src="mathjax/es5/tex-mml-chtml.js"></script>

2. 给MathJax加必要配置

MathJax 3不会自动识别LaTeX语法，得手动配置解析规则，而且配置脚本要放在核心脚本前面：

<script>
  MathJax = {
    tex: {
      inlineMath: [['$', '$'], ['\\(', '\\)']],  // 启用行内公式解析
      displayMath: [['$$', '$$'], ['\\[', '\\]']] // 启用块级公式解析
    }
  };
</script>
<script src="mathjax/es5/tex-mml-chtml.js"></script>

要是页面有动态添加的公式，还得在startup.ready里手动触发渲染：

startup: {
  ready: () => {
    MathJax.startup.defaultReady();
    MathJax.typeset(); // 强制渲染所有公式
  }
}

3. 检查QWebEngineView的关键设置

别漏了启用JavaScript和本地文件访问权限：

settings = webview.settings()
settings.setAttribute(QWebEngineSettings.JavascriptEnabled, True)
settings.setAttribute(QWebEngineSettings.LocalContentCanAccessFileUrls, True)

4. 验证MathJax文件完整性

直接用浏览器打开你的本地HTML文件，按F12看控制台有没有404错误——要是有，要么是路径写错了，要么是mathjax/es5目录里的文件不全，重新下载完整的MathJax包就行。

完整可运行示例

import sys
import os
from PyQt5.QtWidgets import QApplication, QMainWindow, QWebEngineView
from PyQt5.QtCore import QUrl

class MainWindow(QMainWindow):
    def __init__(self):
        super().__init__()
        self.webview = QWebEngineView()
        self.setCentralWidget(self.webview)
        
        # 启用JS和本地文件访问
        settings = self.webview.settings()
        settings.setAttribute(settings.JavascriptEnabled, True)
        settings.setAttribute(settings.LocalContentCanAccessFileUrls, True)
        
        # 构造带公式的HTML
        html = """
        <!DOCTYPE html>
        <html>
        <head>
            <script>
                MathJax = {
                    tex: {
                        inlineMath: [['$', '$'], ['\\(', '\\)']],
                        displayMath: [['$$', '$$'], ['\\[', '\\]']]
                    }
                };
            </script>
            <script src="mathjax/es5/tex-mml-chtml.js"></script>
        </head>
        <body>
            行内公式示例：$E=mc^2$<br>
            块级公式示例：$$\\sum_{n=1}^\\infty \\frac{1}{n^2} = \\frac{\\pi^2}{6}$$
        </body>
        </html>
        """
        # 设置基础URL确保相对路径生效
        base_url = QUrl.fromLocalFile(os.path.abspath(os.getcwd()))
        self.webview.setHtml(html, base_url)

if __name__ == "__main__":
    app = QApplication(sys.argv)
    window = MainWindow()
    window.show()
    sys.exit(app.exec_())

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

PyQt5：QWebEngineView引用本地MathJax无法渲染LaTeX公式

1. 先把路径和加载方式搞对 #

2. 给MathJax加必要配置 #

3. 检查QWebEngineView的关键设置 #

4. 验证MathJax文件完整性 #

完整可运行示例 #

1. 先把路径和加载方式搞对

2. 给MathJax加必要配置

3. 检查QWebEngineView的关键设置

4. 验证MathJax文件完整性

完整可运行示例