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

Question

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

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

考虑这个例子：

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

在这里，函数，或者我可以使用的任何东西，都会返回true。但是如果页面不包含要处理的TeX代码块（或者任何根据MathJax配置如何触发的代码），那么这个应用编程接口将返回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的启动序列，我的答案可能就在这里。然而，我看到当页面上没有数学时，触发器也会运行。

我已经尝试检测诸如MathJax_Preview或mjx-chtml之类的类的存在，它们被添加到生成的元素中。但是这个代码不可靠，因为它需要在呈现过程后触发。这增加了计算时间。

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

Answer 1

下面的代码将检查当前页面是否需要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:[['$'，'$']，[“\\（“，“\\）”]，，但你可能想停止只使用一个美元符号——你会得到太多的误报。如果想继续使用单美元符号，可以在脚本中更新正则表达式。

如果您想要一个不同的脚本，请使用以下网址更新src和integrity属性：https://cdnjs.com/libraries/mathjax（或您喜欢的CDN）

Answer 2

一种可能的解决方法是创建自己的类，然后测试这个类是否存在于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>