Quarto: Math figure labels disappear when embed-resources: true

Question

I've been struggling to create a "correct" standalone html file using quarto! Below a minimal reproducible example.

Here is what I have observed:

• When embed-resources: true, I get the standalone html file BUT I lose the axes' labels written with math symbols.
• When embed-resources: false, I lose the standalone html file (I get an html file + a files folder) BUT I get the axes' labels written with math symbols.

---
embed-resources: true
---

```{python}

import plotly.express as px

from IPython.display import display, HTML
display(HTML(
    '<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_SVG"></script>'
))

fig = px.line(x=[0, 1, 2, 3, 4], 
              y=[1, 2, 4, 8, 16],
              )
fig.update_layout(yaxis_title = r'$2^x$',
                  xaxis_title = r'$x$')
fig.show()
```

I'm really confused and do not know how to solve this issue. I've tried many things like

• Using self-contained-math: true
• Using html-math-method: mathjax (with a specific url or with multiple methods)

But nothing seems to work. Any help is welcome. Thank you.

Answer 1

First lets use a newer version of MathJax, if possible to iron out any old bugs. See the suggested way to setup MathJax via HTML here.

You shouldn't need that r in front of your axis label strings.

I also found I had to set automargin to true so the Y axis didn't get cut off, but you may not need this.

So our final .qmd file looks something like this:

---
format:
  html:
    embed-resources: true
---

```{python}
import plotly.express as px
from IPython.display import HTML, display

display(
    HTML(
        # NOTE: See new HTML code below
        '<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-svg.js"></script>'
    )
)

fig = px.line(
    x=[0, 1, 2, 3, 4],
    y=[1, 2, 4, 8, 16],
)
# NOTE: See removed r in front of math
fig.update_layout(yaxis_title="$2^x$", xaxis_title="$x$")
# NOTE: See new automargin option below
fig.update_yaxes(automargin=True)
fig.show()
```

Results in: