PyQt5: Reference local copy of Mathjax in QWebEngineView

Question

Following this post and the mathjax 3 documentation, I am trying to render a simple html with Mathjax content in PyQt5 using a local copy of the mathjax repo. The main directory contains the notebook from which the following code is executed, a "mathjax" folder containing the content of the repo (especially the es5 folder). Notice that I tried with 2 paths to the js (comment toward the top) :

import sys
from PyQt5.QtWidgets import QApplication
from PyQt5.QtWebEngineWidgets import QWebEngineView
from PyQt5.QtCore import QUrl
import os

# <script type="text/javascript" src="file:///Users/mocquin/.../mathjax/es5/tex-chtml-full.js">                     

pageSource = """
             <html><head>
             <script type="text/javascript" src="./mathjax/es5/tex-chtml-full.js">                     
             </script></head>
             <body>
             <p><mathjax style="font-size:2.3em">$$u = \int_{-\infty}^{\infty}(awesome)\cdot du$$</mathjax></p>
             </body></html>
             """

app = QApplication(sys.argv)
webView = QWebEngineView()
webView.setHtml(pageSource, baseUrl=QUrl(os.path.abspath('')))

webView.show()
sys.exit(app.exec_())

But this only renders the content without the "latex parsing"

What am I missing so that the mathjax is indeed linked to the html ?

score 1 · Answer 1 · answered Jul 19 '22 at 10:53

The problem with your example is that you aren't using the correct format for the src path and base url. The src path must be a plain relative path, and the base url should be a backslash-terminated absolute path to the directory containing the mathjax directory.

Assuming the mathjax directory is in the same directory as the python script, the following should work correctly (at least, it does for me):

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

pageSource = """
<html><head>
<script type="text/javascript" async src="mathjax/es5/tex-chtml-full.js"></script>
</head><body>
<p><mathjax style="font-size:2.3em">$$u = \int_{-\infty}^{\infty}(awesome)\cdot du$$</mathjax></p>
</body></html>
"""

baseurl = QUrl.fromLocalFile(os.path.dirname(os.path.abspath(__file__)) + '/')

print(f'BASEURL: {baseurl.toString()!r}') # BASEURL: 'file:///home/tmp/test/'

app = QApplication(sys.argv)
webView = QWebEngineView()
webView.setHtml(pageSource, baseUrl=baseurl)
webView.show()
sys.exit(app.exec_())

Works fine thanks ! I knew the problem were the paths.. – mocquin Jul 19 '22 at 11:41 — mocquin, Jul 19 '22 at 11:41

PyQt5: Reference local copy of Mathjax in QWebEngineView

1 Answers1

Linked

Related