Search code examples
javascripthtmlmathjax

MathJax unable to render inline elements?

I am trying to create a basic HTML page that renders LaTEX using the MathJax library (https://www.mathjax.org/). However, when I run my webpage in my browser, only the non-inline LaTEX (enclosed in $$) shows, whereas the inline LaTEX does not show (enclosed in $):

enter image description here

This seems strange, considering that I believe I have configured the syntax ($[inline_LaTEX]$) of inline LaTEX through the following piece of code:

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    tex2jax: { inlineMath: [['$', '$']] }
  });
</script>

Below is my code:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0" >
        <title>MathJax Test</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <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-mml-chtml.js"></script>
    
        <script type="text/x-mathjax-config">
          MathJax.Hub.Config({
            tex2jax: { inlineMath: [['$', '$']] }
          });
        </script>
    </head>
    <body>
        <div class="container">
            Here is an example of non-inline LaTEX:
            $$c^2 = a^2 + b^2$$
            Here is an example of inline LaTEX: $c^2 = a^2 + b^2$
        </div>
    </body>
</html>
Solution

  • From @HenryEcker's comment, changing the MathJax import to:

    <script id="MathJax-script" async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

    Worked for me.