代码之家 › 专栏 › 技术社区 › Sunil

设置latex表达式之前的MathJax事件

mathjax html javascript

Sunil · 技术社区 · 7 年前

我有一个MathJax样本 Demo sample

当第三个latex表达式即将被设置时,即 ${ x } ^ { 4 } = 81 $ if $ x^4 - 9 =0 $ 将被设置。

我可以在MathJax设置上述latex表达式之前执行一些自定义JavaScript吗?如果可以,我将如何执行?

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

相同的演示示例代码如下所示。

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

1 回复 | 直到 7 年前

Davide Cervone 7 年前

当数学被排版时,会有信号(见下图) example ),尽管HTML-CSS输出的信号比其他输出格式的信号要复杂一些。

这里有一个例子:

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