Mathjax 版本 3 实时预览

Question

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

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

this page 上有对 "dynamic content" 的引用，但内容稀疏并标记为 "under construction."

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

Mathjax 版本 3 实时预览

Mathjax live preview for version 3

javascript

mathjax