I’m trying to use MathJax in combination with Earmark to display math symbols in a LiveView. Here is how I’m including it in my root.html.heex:

```
<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-chtml.js"></script>
```

And here’s a link to a working example on jsbin

In my heex template if I have this:

```
<section class="markdown" phx-update="ignore" id="topic-description">
<%= Earmark.as_html!(@topic.description) |> Phoenix.HTML.raw() %>
</section>
```

Where the value of **@topic.description** is a Latex snippet:

`$$F = G\frac{m_1m_2}{r^2}$$`

I get properly rendered math symbols when my LiveView if first mounted.

However, if **@topic.description** changes due to a handle_event callback, the new content is not rendered. This makes sense since I am specifying **phx-update=“ignore”***

If I remove the **phx-update=“ignore”** from my template, the math symbols aren’t rendered at all and I just get:

However, I do see the screen quickly flashing the the properly rendered math symbols and then quickly reverting to the un-rendered Latex snippet.

Does anyone have an insight that can move me along a bit?

Thanks!!!