javascript - 检测 Math 的存在以在 MathJax 中处理

Question

我正在使用 MathJax，并且遇到以下情况:

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

考虑这个例子:

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

这里的函数，或者我可以使用的任何函数，将返回 true。但是，如果页面不包含要处理的 TeX 代码块(或根据 MathJax 配置触发方式的任何代码)，则此 API 将返回 false。

更多细节

这与修改渲染管线无关。 MathJax 最终会完成它的工作，我对此很好。我只需要一种可靠的方法(希望由库的 API 提供)来检测页面是否有一些需要处理的数学运算。

MathJax 是否具有我可以用来获取此信息的功能？此外，为了完整起见，我添加了配置 MathJax 的方式(内联):

<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>

或者...

如果我问的实际上不可行，那么这个怎么样:

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?

我看到了 MathJax startup sequence这可能是我的答案。但是，当页面上没有数学时，我看到触发器也在运行。

---

疑难解答

我试图检测是否存在添加到生成的元素中的类，例如 MathJax_Preview 或 mjx-chtml。但是这段代码并不可靠，因为它需要在渲染过程之后触发。这会增加计算时间。

我找不到我正在寻找的用于查询是否存在要呈现的数学的 API，但似乎很奇怪 MathJax 没有公开这样的东西。

Answer 1

一种可能的解决方法是创建您自己的类，然后测试该类是否存在于 DOM 中，然后在需要时动态嵌入 mathjax

数学片段:

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>

相同但没有数学:

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>