Access MathJax.Hub with MathJax loaded dynamically as script in React

Question

I imported MathJax dynamically in React by adapting the accepted (updated) answer from Adding script tag to React/JSX, that is:

const MathJaxScript =() => {
  const script = document.createElement('script');
  script.type = "text/javascript";
  script.src = 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js';
  script.async = true;

  var config = 'MathJax.Hub.Config({' +
                 'extensions: ["tex2jax.js","TeX/AMSmath.js","TeX/AMSsymbols.js"],' +
                 'jax: ["input/TeX","output/HTML-CSS"],' +
               'tex2jax: {inlineMath: [ ["$","$"], ["\\(","\\)"] ],displayMath: [ ["$$","$$""], ["\\[","\\]"] ],processEscapes: true}});'
               +
               'MathJax.Hub.Startup.onload();'
               ;
      document.body.appendChild(script);
    return () => {
      document.body.removeChild(script)
    }
};
export default MathJaxScript;

LaTex now displays nicely on my pages, but when I update the content, the new LaTex content is not parsed by MathJax. I would need to call MathJax.Hub.Queue(["Typeset",MathJax.Hub]); to do so. What is the best way to access MathJax.Hub using my current setup?

MathJax v3 has a completely different API. The config won't work and MathJax.Hub no longer exists. You might want to check the documentation starting at http://docs.mathjax.org/en/latest/advanced/typeset.html. — Peter Krautzberger, Apr 18 '20 at 12:18
Thanks, I'm having a look at the doc. It also explains why the config was not working. Do you have any idea How I could load it properly? I need a MathJax= instead of MathJax.Hub. — Nre, Apr 18 '20 at 12:39
The page [http://docs.mathjax.org/en/latest/web/typeset.html](http://docs.mathjax.org/en/latest/web/typeset.html) is probably a better starting point, as it is more complete. — Davide Cervone, Apr 19 '20 at 11:20
May I suggest you use a package for this? I can recommend [better-react-mathjax](https://www.npmjs.com/package/better-react-mathjax) that I wrote. Either you can use it altogether and don't care about typesetting details, or you can use it just to handle the download of MathJax and then access the `Hub` or `startup` properties (depending on which version you use) by means of the `MathJaxBaseContext` as shown [here](https://codesandbox.io/s/better-react-mathjax-custom-example-latex-e5kym) — fast-reflexes, Apr 02 '21 at 09:15

Nre · Accepted Answer · 2020-04-21T09:45:53.573

Using Peter's comment, I was able to load MathJax just using this:

const MathJaxScript =() => {
  const script = document.createElement('script');
  script.type = "text/javascript";
  script.src = 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js';
  script.async = true;
};
export default MathJaxScript;

Then after calling the script,

window.MathJax={tex: {inlineMath: [["$", "$"], ["\\(", "\\)"]],packages: ["base", "newcommand", "configMacros"]},svg: {fontCache: "global"}};

To change the configuration.

I realized that this appears in fact the latest doc released: https://docs.mathjax.org/_/downloads/en/v3.0-latest/pdf/

Access MathJax.Hub with MathJax loaded dynamically as script in React

1 Answers1