MathJax Not Working For In-Line Math

[azorbz]

Select Topic Area

Question

Body

I am developing a maths-resources website and am using MathJax to render the maths. I implemented a solution I saw online and it works perfectly when the files are stored on my machine. However, when I upload my files to GitHub and have it as a Pages site, the in-line maths stops working on PC. When the site is viewed on mobile, the in-line maths works fine, but the in-line maths does not work when viewing it on the PC (the other maths renders fine) after testing in multiple browsers.

I am using this script in my HTML pages.
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
and <script>MathJax = {tex: {inlineMath: [["$", "$"]]}}</script>.

An example page is Normed Spaces.

When viewed while my files are stored locally:

When viewed via GitHub Pages (Desktop):

When viewed via GitHub Pages (mobile):

[LiteBrite82]

That is so weird... 😕. I followed the link you provided and it shows up as intended for me. MacBook Pro M1, Google Chrome.
What does your inspect terminal say?

[LiteBrite82]

Its good in safari for me too

[LiteBrite82]

Browser compatibility?: https://docs.mathjax.org/en/latest/misc/faq.html#faq-ie-support

[LiteBrite82]

wait... now its not... am I crazy? I swear it looked right when I last checked. Now I see the errors...

[LiteBrite82]

And now its back to normal after page refresh.....

[LiteBrite82]

I wonder if its an API thing... can you use "await" in your api calls... unless its just used as a script... check out this article: https://stackoverflow.com/questions/7308908/waiting-for-dynamically-loaded-script

[dpvc]

Your configuration script needs to come BEFORE the script that loads tex-mml-chtml.js, otherwise MathJax can be loaded (from cache for example) before the configuration is loaded, and so your inline math delimiters won't be configured. Reverse the two scripts and you should be fine.