MathJAX

MathJAX (Version 3.x)

MathJAX Example:

$$ \frac{\partial}{\partial x} \psi = - i \hbar \frac{\partial}{\partial t} \psi $$

Combined components

  • tex-chtml – TeX to CommomHTML
  • tex-svg – TeX to SVG
  • mml-chtml

Inclusion via CDN

<script async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/latest.js"></script>

Polyfill for older Browsers

Before the script that loads MathJax:

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>

MathJAX Configuration

Configuration (Inline)

Provide MathJAX object just before loading MathJAX itself.

<script>
  MathJax = { /**/ };
</script>
  • Enable single dollar signs as in-line math delimiters
<script>
  MathJax = {
    tex: {
      inlineMath: [['$', '$'], ['\\(', '\\)']]
    }
  };
</script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
  • SVG output component to use a global font cache for all expressions on the page (rather than a separate cache for each expression on the page)
<script>
  MathJax = {
    tex: {
      inlineMath: [['$', '$'], ['\\(', '\\)']]
    },
    svg: {
      fontCache: 'global'
    }
  };
</script>
<script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>

Load common packages

  • The physics package. Documentation of the physics package.
  • The ams math package.
  • The color package.
  • More MathJAX extensions here.
<script>
  MathJax = {
    loader: {load: ['[tex]/physics', '[tex]/ams', '[tex]/color']},
    tex: {
      packages: {'[+]': ['physics', 'ams', 'color']},
      inlineMath: [['$', '$'], ['\\(', '\\)']]
    },
    svg: {
      fontCache: 'global'
    }
  };
</script>
<script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>

Configuration (Local file)

mathjax-config.js

window.MathJax = { /* ... */ };

<script src="mathjax-config.js" defer></script>
<script type="text/javascript" id="MathJax-script" defer
  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js">
</script>

Configuration and Loading in one script

(function () {
  var script = document.createElement('script');
  script.src = 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js';
  script.async = true;
  document.head.appendChild(script);
})();

Hosting MathJAX yourself

Download the MathJAX package via

npm install mathjax@3

or from github.