Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

How do you render JS (in particular MathJax or KaTeX) inside of a QWebEngineView?



  • from PyQt5.QtWidgets import (QGraphicsProxyWidget, QMainWindow,
                                 QGraphicsView, QGraphicsScene,
                                 QGraphicsObject, QGraphicsItem, QWidget,
                                 QHBoxLayout, QApplication)
    from PyQt5.QtCore import Qt, QUrl
    from PyQt5.QtGui import QBrush
    from PyQt5.QtWebEngineWidgets import QWebEngineView
    import sys
    
    class A(QGraphicsObject):
       def __init__(self, url=None):
          super().__init__()
          self.web_view = QWebEngineView()
          if url is None:
             url = QUrl(url)
             self.web_view.load(url)
          self.proxy = QGraphicsProxyWidget(parent=self)
          self.proxy.setWidget(self.web_view)
          self.web_view.show()
          
       def boundingRect(self):
          return self.childrenBoundingRect()
       
       def paint(self, painter, option, widget):
          pass
    
    if __name__ == '__main__':
       app = QApplication([])
       
       window = QMainWindow()
       window.show()
       view = QGraphicsView()
       scene = QGraphicsScene()
       scene.setBackgroundBrush(QBrush(Qt.gray))
       view.setScene(scene)
       html = '''
       <!DOCTYPE html>
       <!-- KaTeX requires the use of the HTML5 doctype. Without it, KaTeX may not render properly -->
       <html>
           <head>
               <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.0-rc.1/dist/katex.min.css" integrity="sha384-D+9gmBxUQogRLqvARvNLmA9hS2x//eK1FhVb9PiU86gmcrBrJAQT8okdJ4LMp2uv" crossorigin="anonymous">
       
               <!-- The loading of KaTeX is deferred to speed up page rendering -->
               <script src="https://cdn.jsdelivr.net/npm/katex@0.10.0-rc.1/dist/katex.min.js" integrity="sha384-483A6DwYfKeDa0Q52fJmxFXkcPCFfnXMoXblOkJ4JcA8zATN6Tm78UNL72AKk+0O" crossorigin="anonymous"></script>
       
               <!-- To automatically render math in text elements, include the auto-render extension: -->
               <script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.0-rc.1/dist/contrib/auto-render.min.js" integrity="sha384-yACMu8JWxKzSp/C1YV86pzGiQ/l1YUfE8oPuahJQxzehAjEt2GiQuy/BIvl9KyeF" crossorigin="anonymous"
               onload="renderMathInElement(document.body);"></script>
           </head>
           <body>
       
               <p id="IdentificatorForElement"></p>
       
               <script>
                   katex.render("C", document.getElementById('IdentificatorForElement'), '
                       throwOnError: false
                   });
               </script>
           </body>
       </html>
       '''
       #a = A("http://www.google.com")
       a = A()
       a.web_view.setHtml(html)
       scene.addItem(a)
       window.setCentralWidget(view)
       a.web_view.renderProcessTerminated.connect(a.update)   
       sys.exit(app.exec_())
    

    The minimal code using KaTeX in the html doesn't work. Produces underlying JS errors printed to stdout:

    [10680:7724:1210/134453.631:ERROR:mf_helpers.cc(14)] Error in dxva_video_decode_accelerator_win.cc on line 513
    js: Uncaught SyntaxError: Invalid or unexpected token
    

    Sometimes a longer list is printed.

    All I want is LaTeX inside of a QGraphicsObject. I've done the MkTeK backend thing and rendered to SVG then SVG in a graphics item, and that works sometimes. Other times my thread crashes. So was thinking oh this MathJax stuff is a better idea.

    Think again!


Log in to reply