How do you add MathJax?

Anvil Q&A
1

Has anybody else previously used the MathJax library with Anvil?

I’m running into trouble adding this library to an app as it has a myriad of small javascript & font files that are typically loaded as needed from a CDN. (There are a few thousand files, but my use case would only require approx. 262) I’m hesitant to start adding such a large number of files to the Assets, without a way to organize them into folders.

Alternatively, is there was a way to import from CDN that I don’t know about?
e.g.:

Thanks in advance!

2

Just looking at the Mathjax homepage, it looks like adding this to your HTML should do the trick:

<script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML' async></script>

Are you making a Mathjax custom component? Because that would be really cool if you could share it with us…

1 Like
4

I’m creating a very basic custom component that contains one property in which a TeX string may be entered and rendered at runtime. Here is the code in its current form:

from ._anvil_designer import TeXTemplate
from anvil import *
import anvil.server

class TeX(TeXTemplate):
  mathjax_script='<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script><script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"> </script>'
  def __init__(self, **properties):
    self.init_components(**properties)

  @property
  def tex(self):
    print(f"Getting tex: {self._tex}")
    return self._tex

  @tex.setter
  def tex(self, value):
    print(f"Setting tex: {value}")
    self._tex = value
    self.html = self.mathjax_script + '<p>' + value + '</p>'

I’d be happy to make a more polished and shareable component upon request. I’ll probably have questions about how to package components.

Thanks,
Jim

1 Like