Предварительный просмотр Mathjax для версии 3 - PullRequest
Новая
       29

Предварительный просмотр Mathjax для версии 3

1 голос
/ 07 мая 2020

Я использую последнюю версию Mathjax (3) и ищу функцию, которая была продемонстрирована в версии 2.7. Возможность рендерить предварительный просмотр латексного ввода полезна при отправке форм, но я не могу найти эквивалентную реализацию в Mathjax версии 3.

Я не уверен, требуется ли функции пока доступны - примечания к обновлению предупреждают о несовместимости, но я не уверен, является ли это причиной.

На этой странице есть ссылка на «Dynami c content», но содержимое разреженное и помечено как «в разработке».

Я могу вернуться к версии 2, чтобы иметь возможность рендеринга в реальном времени, но я заинтересован в переходе на версию 3.

1 Ответ

1 голос
/ 11 мая 2020

Следующий пример из 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>
...