排版乳胶表达式之前的 MathJax 事件

Question

我在 Demo sample 有一个 MathJax 示例，它按预期工作。它所做的只是在 div 中排版 latex 表达式，其 id 为 mathDiv.

当第三个乳胶表达式即将被排版时，即当 ${ x } ^ { 4 } = 81 $ if $ x^4 - 9 =0 $ 将被排版时，我需要执行一些自定义逻辑。

问题

我可以在上面的 Latex 表达式被 MathJax 排版之前执行一些自定义 JavaScript 吗？如果可以，我该怎么做？

我在想可能有一些与 MathJax 排版相关的事件模型，但在文档中找不到。

同样的demo示例代码如下

 <h2>Math Test</h2>
 <div id="mathDiv">1. Solve for x $$X^2-1 = 8$$. 
     <br>2. Evaluate the following limit: $$\lim_{x \rightarrow b}{  (x-10)  }$$
     <br>3. Is ${  x  } ^ {  4  } = 81 $ if $ x^4 - 9 =0 $ ?
 </div>
 <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
 <script type="text/x-mathjax-config">
   MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\(','\)']]}});
</script>
<script type="text/javascript"
   src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

<script>
   $(document).ready(function() {
   MathJax.Hub.Queue(["Typeset", MathJax.Hub, "mathDiv"]);
  });

</script>

Answer 1

有数学排版时的信号（请参阅此 example），尽管 HTML-CSS 输出的信号比其他输出格式更复杂一些.

但还有另一种方法可能更适合您。您可以注册一个预处理器，在 tex2jax 预处理器在页面中找到数学之后，它将运行，这将在那时将您的包装器放在数学周围。然后当数学排版时，它会自动在包装器内。

这是一个例子：

<style>
#math0 {color:red}
#math1 {color:blue}
#math2 {color:green; font-size: 200%}
#math3 {color:purple; font-size: 75%}
</style>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  tex2jax: {inlineMath: [['$','$'], ['\(','\)']]}
});
MathJax.Hub.Register.PreProcessor(function (element) {
  //
  // Get the math scripts created by tex2jax
  //
  var math = element.querySelectorAll('script[type^="math/tex"]');
  //
  //  Loop through them in reverse (since this
  //  is a live list)
  //
  for (var i = math.length - 1; i >= 0; i--) {
    //
    //  Get the script and any preview that preceeds it
    //
    var script = math[i];
    var preview = script.previousSibling;
    if (preview && preview.className !== 'MathJax_Preview') preview = null;
    //
    //  Create the wrapper span and give it an id
    //  (If you will be typesetting more than once, 
    //   you will need to keep a global id number
    //   and use that rather than i)
    //
    var span = document.createElement('span');
    span.id = 'math'+i;
    //
    //  Insert the wrapper in place of the script
    //  and append the preview and script to
    //  the wrapper.
    //
    script.parentNode.replaceChild(span,script);
    if (preview) span.append(preview);
    span.append(script);
  }
},50);  // use priority 50 so it follows the standard MathJax preprocessors
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS_CHTML-full"></script>

<h2>Math Test</h2>
 <div id="mathDiv">1. Solve for x $$X^2-1 = 8$$. 
     <br>2. Evaluate the following limit: $$\lim_{x \rightarrow b}{  (x-10)  }$$
     <br>3. Is ${  x  } ^ {  4  } = 81 $ if $ x^4 - 9 =0 $ ?
 </div>

此处，包装器的样式设置为添加颜色并缩放第三个和第四个表达式。

我希望评论能清楚地说明正在发生的事情。任何时候调用 MathJax.Hub.Typeset() 时，此预处理器都会运行，因此您可以正常使用它。

请注意，如果数学最初在页面中，就像这里一样，则无需手动排队 Typeset() 调用（因为 MathJax 将首先排版页面）。如果您正在动态修改页面，那么您将需要这样做。

排版乳胶表达式之前的 MathJax 事件

MathJax event just before a latex expression is typset

html

javascript

mathjax