第3版的Mathjax实时预览

Question

我正在使用最新版本的Mathjax（3），并且正在寻找2.7版中演示的功能。提交表单时可以使用render a preview of latex input的功能，但是我无法弄清楚Mathjax版本3中的等效实现。

[我不确定所需的功能是否可用-upgrade notes警告不兼容，但我不确定这是否是原因。

this page上提到了“动态内容”，但内容稀疏并标记为“正在建设中”。

我可以回滚到版本2以进行实时渲染，但是我有兴趣迁移到版本3。

Answer 1

https://mathjax.github.io/MathJax-demos-web/input-tex2chtml.html中的以下示例似乎是您想要的。

  function convert() {
      var input = document.getElementById("input").value.trim();
      var display = document.getElementById("display");
      var button = document.getElementById("render");
      button.disabled = display.disabled = true;
      output = document.getElementById('output');
      output.innerHTML = '';
      MathJax.texReset();
      var options = MathJax.getMetricsFor(output);
      options.display = display.checked;
      MathJax.tex2chtmlPromise(input, options).then(function (node) {
        output.appendChild(node);
        MathJax.startup.document.clear();
        MathJax.startup.document.updateDocument();
      }).catch(function (err) {
        output.appendChild(document.createElement('pre')).appendChild(document.createTextNode(err.message));
      }).then(function () {
        button.disabled = display.disabled = false;
      });
    }

<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
<textarea id="input" rows="10" cols="70">
%
% Enter TeX commands below
%
x = {-b \pm \sqrt{b^2-4ac} \over 2a}.
</textarea>
<br />
<div class="left">
<input type="checkbox" id="display" checked onchange="convert()"> <label for="display">Display style</label>
</div>
<div class="right">
<input type="button" value="Render TeX" id="render" onclick="convert()" />
</div>
<br clear="all" />
<div id="output"></div>
</div>