在 MathJax 中检测是否存在要处理的 Math

Question

我正在使用 MathJax，我有以下场景：

当页面包含一些 MathJax 将正确处理和呈现的数学时，我想运行一些代码

考虑这个例子：

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

或者...

如果我的要求实际上不可行，那么这个怎么样：

我可以附加到渲染管道中的事件，以便在 MathJax 完成数学渲染时执行回调函数吗？

我看到了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>

Answer 2

下面的代码会检查当前页面是否需要MathJax，如果需要，只在脚本中加载：

<script>
document.addEventListener('DOMContentLoaded', () => {
  const skipHtmlTags = ['script', 'noscript', 'style', 'textarea', 'pre', 'code', 'annotation', 'annotation-xml'].map((v) => `:not(${v})`).join('')
  const ignoreHtmlClasses = ['mathjax_ignore'].map((v) => `:not(.${v})`).join('')
  const requiresMathjax = Array.from(document.body.querySelectorAll('*' + skipHtmlTags + ignoreHtmlClasses))
    .some((el) => el.textContent.match(/\\\(|\$\$|\\\[/))

  if (requiresMathjax) {
    const sc = document.createElement('script')
    sc.setAttribute('src', 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.0/es5/tex-mml-chtml.min.js')
    sc.setAttribute('integrity', 'sha512-9DkJEmXbL/Tdj8b1SxJ4H2p3RCAXKsu8RqbznEjhFYw0cFIWlII+PnGDU2FX3keyE9Ev6eFaDPyEAyAL2cEX0Q==')
    sc.setAttribute('crossorigin', 'anonymous')
    sc.setAttribute('referrerpolicy', 'no-referrer')
    document.head.appendChild(sc)
  }
})
</script>

缩小：

document.addEventListener("DOMContentLoaded",()=>{var t=["script","noscript","style","textarea","pre","code","annotation","annotation-xml"].map(t=>`:not(${t})`).join(""),e=["mathjax_ignore"].map(t=>`:not(.${t})`).join("");if(Array.from(document.body.querySelectorAll("*"+t+e)).some(t=>t.textContent.match(/\\\(|\$\$|\\\[/))){const n=document.createElement("script");n.setAttribute("src","https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.0/es5/tex-mml-chtml.min.js"),n.setAttribute("integrity","sha512-9DkJEmXbL/Tdj8b1SxJ4H2p3RCAXKsu8RqbznEjhFYw0cFIWlII+PnGDU2FX3keyE9Ev6eFaDPyEAyAL2cEX0Q=="),n.setAttribute("crossorigin","anonymous"),n.setAttribute("referrerpolicy","no-referrer"),document.head.appendChild(n)}});

您有inlineMath: [ ['$','$'], ["\\(","\\)"] ],，但您可能希望停止只使用一个美元符号——您会得到太多误报。如果您想继续使用单个美元符号，可以更新脚本中的正则表达式。

如果您想要不同的脚本，请使用 https://cdnjs.com/libraries/mathjax（或您的首选 CDN）上的 URL 更新 src 和 integrity 属性