How to configure MathJax to render chemical equations in HTML?

Question

I am trying to render mathematical equations using MathJax in HTML. So far, here's what I have:

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

<script type="text/javascript" async
  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML">
</script>

However, I am also trying to get MathJax to recognize chemical equations such as $\\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$ but so far I have no success. What would be a simple and straightforward way to modify MathJax so that it recognizes chemical equation scripts as well?

I am using Django for my web application.

Answer 1

You need to include

  TeX: {
    extensions: ['mhchem.js']
  },

in your MathJax configuration. So you should use

    MathJax.Hub.Config({
        TeX: {
          extensions: ['mhchem.js']
        },
        tex2jax:
        {
            inlineMath: [['$','$'], ['\\(','\\)']],
            ignoreClass: "math-editor", // put this here
        }
  });

instead. If you aren't using MathML or AsciiMath input formats, you would also do better to load the TeX-AMS_CHTML config file rather than the larger (and so slower) TeX-MML-AM_CHTML file.