Detect the presence of Math to process in MathJax

Question

I am using MathJax and I have the following scenario:

I want to run some code when the page contains some Math that MathJax will process and render properly

Consider this example:

<p>
This is a page containing an equation: $b^2 - 4ac$.
</p>

Here the function, or whatever it is I can use, would return true. But if the page contains no chunk of TeX code to process (or any code according to how MathJax was configured to trigger), then this API would return false.

A bit more details

This is not about modifying the rendering pipeline. MathJax will eventually do its job and I am fine with it. I just need a reliable way (hopefully provided by the library's API) to detect that the page has some math that will need processing.

Does MathJax has a functionality that I can use to get this info? Also, for completeness, I am adding the way I am configuring MathJax (inline):

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    extensions: ["tex2jax.js"],
    jax: ["input/TeX", "output/CommonHTML"],
    tex2jax: {
      inlineMath: [ ['$','$'], ["\\(","\\)"] ],
      displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
      processEscapes: true
    },
    "CommonHTML": { linebreaks: { automatic: true } }
  });
</script>
<script src="//mathjax.rstudio.com/latest/MathJax.js?config=TeX-MML-AM_CHTML"></script>

Alternatively...

If what I am asking is not actually feasible, then how about this:

Can I attach to an event in the rendering pipeline so I get to execute a callback function when MathJax is done rendering the math?

I saw the MathJax startup sequence and there lies my answer probably. However I see the trigger is run also when there is no math on the page.

---

Troubleshoot

I have tried to detect the presence of classes like MathJax_Preview or mjx-chtml which are added to the elements that are generated. But this code is not reliable as it needs to trigger after the rendering process. And this adds time to the computation.

I cound not find the API I am looking for for querying the presence of math to render, but it seems strange there is not such a thing exposed by MathJax.

Answer 1

A possible workaround is to create your own class, then test if this class is present in the DOM, then embed mathjax dynamically if needed

Snippet with math :

var test  = document.querySelectorAll('.math2Process');

if(test.length>0){
  var mathJax_config = document.createElement('script');
  mathJax_config.setAttribute('type','text/x-mathjax-config');
  mathJax_config.text = `MathJax.Hub.Config({
      extensions: ["tex2jax.js"],
      jax: ["input/TeX", "output/CommonHTML"],
      tex2jax: {
        inlineMath: [ ['$','$'], ["\\(","\\)"] ],
        displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
        processEscapes: true
      },
      "CommonHTML": { linebreaks: { automatic: true } }
    });`
  var mathJax_script = document.createElement('script');

  mathJax_script.setAttribute('src','//mathjax.rstudio.com/latest/MathJax.js?config=TeX-MML-AM_CHTML');

  document.head.appendChild(mathJax_config);
  document.head.appendChild(mathJax_script);
}

<p class="math2Process">
This is a page containing an equation: $b^2 - 4ac$.
</p>

the same but no math :

var test  = document.querySelectorAll('.math2Process');

if(test.length>0){
  var mathJax_config = document.createElement('script');
  mathJax_config.setAttribute('type','text/x-mathjax-config');
  mathJax_config.text = `MathJax.Hub.Config({
      extensions: ["tex2jax.js"],
      jax: ["input/TeX", "output/CommonHTML"],
      tex2jax: {
        inlineMath: [ ['$','$'], ["\\(","\\)"] ],
        displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
        processEscapes: true
      },
      "CommonHTML": { linebreaks: { automatic: true } }
    });`
  var mathJax_script = document.createElement('script');

  mathJax_script.setAttribute('src','//mathjax.rstudio.com/latest/MathJax.js?config=TeX-MML-AM_CHTML');

  document.head.appendChild(mathJax_config);
  document.head.appendChild(mathJax_script);
}

<p>
This is a page containing an equation: $b^2 - 4ac$.
</p>