Latex in Anvil using MathJax

[drenren]

What I’m trying to do:
i am trying to show Latex formula in Anvil

What I’ve tried and what’s not working:

i am trying to using MathJax , where i added the following reference in the native library

however, the formula is still displayed in their “text” format

for example,
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}.]

what needs to be done in order for this to work ?

Code Sample:

# code snippet

Clone link:
share a copy of your app

[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>

[drenren]

@stucork

"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}.\]"

this is awesome, thank you so much for your advice