如何触发MathJax？

Question

我在脚本

中添加了MathJax

<script type="text/javascript" async
  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML">
</script>

这会自动用格式化的标签替换所有数学代码。

1. 如何仅通过javascript点击触发MathJax，而不是在加载时触发。{/ li>
2. 如何告诉MathJax将格式化元素放在页面末尾而不是替换原始代码？

Answer 1

1。如何仅通过javascript单击触发MathJax，而不是在加载时触发。

来自docs： skipStartupTypeset: false

  

通常，只要页面加载，MathJax就会在页面上排版数学。如果您想延迟该过程，则需要亲自致电MathJax.Hub.Typeset()，请将此值设置为true。

Starting typeset

  

MathJax.Hub.Typeset（）命令也接受一个参数a   要将其内容排版的DOM元素。那可能是段落，   或元素，甚至是MathJax数学标记。它也可以   是这样一个对象的DOM id，在这种情况下，MathJax会查找   DOM元素给你。所以

MathJax.Hub.Queue(["Typeset",MathJax.Hub,"MathExample"]);

     

将排列id为的元素中包含的数学   MathExample。这相当于

var math = document.getElementById("MathExample");
MathJax.Hub.Queue(["Typeset",MathJax.Hub,math]);

     

如果没有提供元素或元素id，则整个文档是   排版。

＆＃13;

＆＃13;

MathJax.Hub.Config({
    skipStartupTypeset: true,
    extensions: ["tex2jax.js", "TeX/AMSmath.js"],
    jax: ["input/TeX", "output/HTML-CSS"],
    tex2jax: {
        inlineMath: [["$", "$"]],
        processEscapes: true
    }
});

function startTypeSetting() {
  var HUB = MathJax.Hub;
  HUB.Queue(["Typeset", HUB, "render-me"]);
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML"></script>
<p id="render-me">$a+b=c$<p>

<button onClick="startTypeSetting()">Start typesetting</button>

＆＃13;

＆＃13;

＆＃13;

2。如何告诉MathJax将格式化元素放在页面末尾而不是替换原始代码？

最好知道你想要实现什么，但是有两种方法可以跳过某些标签或类的排版，来自tex2jax preprocessors configs：

MathJax.Hub.Config({
     tex2jax: {
         skipTags: ["script","noscript","style","textarea","pre","code"],
         ignoreClass: "tex2jax_ignore_1|tex2jax_ignore_2"
    }
}

您可以将要渲染的元素的内容复制到另一个元素，然后在那里开始排版：

＆＃13;

＆＃13;

MathJax.Hub.Config({
    skipStartupTypeset: true,
    extensions: ["tex2jax.js", "TeX/AMSmath.js"],
    jax: ["input/TeX", "output/HTML-CSS"],
    tex2jax: {
        inlineMath: [["$", "$"]],
        processEscapes: true
    }
});

function startTypeSetting() {
  //copy content from '#code-to-render' to '#render-point'
  var text = $('#code-to-render').val()
  $('#render-point').text(text)
  
  //Start typesetting
  var HUB = MathJax.Hub;
  HUB.Queue(["Typeset", HUB, "render-point"]);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML"></script>

<textarea id="code-to-render">$a+b=c$</textarea>
<p id="render-point"></p>

<button onClick="startTypeSetting()">Start typesetting</button>

＆＃13;

＆＃13;

＆＃13;