Mathjax live preview for version 3

user_1164295 0
Viewed 343

I'm using the latest version of Mathjax (3) and am looking for a feature that was demonstrated in version 2.7. The ability to render a preview of latex input is useful when submitting forms, but I am unable to figure out the equivalent implementation in Mathjax version 3.

I'm not sure whether the required features are available yet -- the upgrade notes warn of incompatibilities but I'm not sure whether this is the cause.

There's reference to "dynamic content" on this page but the content is sparse and marked as "under construction."

I can roll back to version 2 in order to have live rendering, but I'm interested in migrating to version 3.

mathjax javascript
1 Answers

The following example from https://mathjax.github.io/MathJax-demos-web/input-tex2chtml.html seems to be what you're looking for.

  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>

user_13396510
Related