Latex in Anvil using MathJax

[stucork]

Hi @drenren and welcome to the forum,

always useful to check the forum:

Loading <script> once for use with custom component

this is a MathsJax specific thing… when you load the mathsjax script it reads the page and renders any TeX it finds. Then it’s done. That’s why it’s not working in Native Libraries. It’s done before the component had even loaded… documentation: https://docs.mathjax.org/en/latest/advanced/typeset.html But there is a function that can be called to re-render the page - MathJax.typeset() Here’s some code that allows you to dynamically change the component without using the script tags inside the…

here’s an updated solution based on new features since that post:

from anvil.js.window import MathJax
    
class Form1(Form1Template):
  def __init__(self, **properties):
    self.init_components(**properties)
    self.label_1.text =   "When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are\[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]"

  def form_show(self, **event_args):
    """This method is called when the HTML panel is shown on the screen"""
    MathJax.typeset() # rerender any latex on this page
    # if you add content dynamically you may need to recall this function

Also I removed the async part of the script because otherwise MathJax might not have loaded when we try to import it…

<!---no async  -->
<script id="MathJax-script" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>