javascript - Mathjax 版本 3 实时预览

Question

我正在使用最新版本的 Mathjax (3) 并正在寻找在版本 2.7 中演示的功能。 render a preview of latex input的能力在提交表单时很有用，但我无法找出 Mathjax 版本 3 中的等效实现。

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

在 this page 上提到了“动态内容”但内容稀少并标记为“正在 build 中”。

我可以回滚到版本 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>