MathJax in HTML code not working

[j-machacek]

Dear all,

I am currently facing an issue when using MathJax inside HTML environments. The math expressions are not rendered properly. An illustration of the problem is given in the figure below.

The corresponding code snipped is:

<p align="center">
  <img src="./assets/elasticity-closed-strain-loop.png" width=85% /> <br>
  <em> Figure 3. Calculated stress paths for a prescribed closed strain paths with two cycles. For a hypo-elastic material model, a closed strain path can result in an accumulation of stress ($\Delta \sigma \neq 0$) and a dissipation of energy ($\Delta W \neq 0$)</em>
</p>

I am using MathJax with the settings from the mkdocs-material documentation

If I am using katex instead of MathJax the equations are rendered properly. However, I need MathJax for equation numbering and making reference to equations in the text.

Does anyone have an idea what I might be doing wrong?

Much appreciated in advance.

[kamilkrzyskow]

Hello @j-machacek,
to avoid any misunderstandings about the configuration it would be nice to see a minimal reproduction zip archive we could run.

Actually, I never set up MathJax myself, but from your post I can see:

1. The documentation uses options to target specific HTML:

  options: {
    ignoreHtmlClass: ".*|",
    processHtmlClass: "arithmatex"
  }

So one solution could be to wrap your LaTeX syntax into a span <span class="arithmatex">($\Delta \sigma \neq 0$)</span>

2. That you're using Markdown/MathJax inside HTML, so you could try using the Arithmatex syntax to define the span above that way. Make sure md_in_html is enabled, and later use the \($\Delta \sigma \neq 0$\), notice the \( and \), but perhaps only enabling md_in_html will be enough.

[facelessuser]

You have to enable md_in_html and then add markdown to the block element: <p align="center" markdown>.

This is assuming Arithmatex is enabled. It should be able to handle $\Delta \sigma \neq 0$.

[j-machacek]

Thank you both for the quick reply!

Indeed, the last hint was what was missing:

<p align="center" markdown>

No further changes need to be made to the default settings. Everything looks as expected now.