Using mathjax with anvil

Hello,

I am having the same issue as the original poster. I tried the solution here without any success.
I tried changing the CDN to some different options and also tried it on a blank template without any other code.
Any suggestions?
Thanks

Hi @modenacalcio and welcome to the forum.

I moved your post to a new thread since the other thread already had a solution.
You’ll probably want to add some details about what you’ve tried and what’s not working.

Code snippets and a clone link will also be helpful so that others can take a look at what’s going on.

Hey,
Newbie here.
I want to use MathJax formatted text on my app. I have placed the CDN link to MathJax in the Native Library:

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

Then I used the following in the form:

from anvil.js.window import MathJax

When I type Mathjax formatted text in the label, it shows up as regular text. I also tried the MathJax.typeset() as was suggested in another post in order to re-render the page. It didn’t work either.

Here is the clone link: Anvil | Login

You just need to hook up the form show event in the designer view
Screenshot 2022-03-19 at 09.40.10

select Form from the list of components in the Properties panel and you’ll see your show event is empty.

1 Like

Thanks that works! Looked that one over for sure.

The other related problem I am having is that as long as I have the mathjax script in the native library, and have a graph component on the form, I get:

[An internal error has occurred]

whenever it tries to run the graph component with plotly.
Any solution for this?

It looks like this bug from the plotly github

it’s to do with plotly expecting MathJax version 2 rather than version 3.
The solution on that issue solved the internal error for me:

add to Native Libraries

<script type="text/javascript">
  window.PlotlyConfig = {MathJaxConfig: 'local'};
</script>:

This works for me as well. Thank you for the help.

1 Like