Отображение вывода mathjax в реальном времени

#javascript #jquery #mathjax

Вопрос:

Как мне изменить этот пример mathjax для просмотра в режиме реального времени во время ввода? Прямо сейчас он отображает результат только после того, как я нажал enter. Я хотел бы настроить его так, чтобы он работал аналогично тому, как stackoverflow / math.stackexchange показывает предварительный просмотр при вводе вопроса.

 <html>
<head>
<title>MathJax Dynamic Math Test Page</title>

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    tex2jax: {
      inlineMath: [["$","$"],["\(","\)"]]
    }
  });
</script>
<script type="text/javascript"
  src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML-full">
</script>

</head>
<body>

<script>
  //
  //  Use a closure to hide the local variables from the
  //  global namespace
  //
  (function () {
    var QUEUE = MathJax.Hub.queue;  // shorthand for the queue
    var math = null;                // the element jax for the math output.

    //
    //  Get the element jax when MathJax has produced it.
    //
    QUEUE.Push(function () {
      math = MathJax.Hub.getAllJax("MathOutput")[0];
    });

    //
    //  The onchange event handler that typesets the
    //  math entered by the user
    //
    window.UpdateMath = function (TeX) {
      QUEUE.Push(["Text",math,"\displaystyle{" TeX "}"]);
    }
  })();
</script>

Type some TeX code:
<input id="MathInput" size="50" onchange="UpdateMath(this.value)" />
<p>

<div id="MathOutput">
You typed: ${}$
</div>

</body>
</html>

1. да, потому onchange что срабатывает только при нажатии клавиши ввода или когда поле размыто.

2. Заметка из будущего: cdn.mathjax.org приближается к концу срока службы, проверьте mathjax.org/cdn-shutting-down для получения советов по миграции.

3. @PeterKrautzberger Каков наилучший способ показать предварительный просмотр MathJax в режиме реального времени на сайте WordPress, на котором есть поле ввода для написания вопросов / комментариев с математическими формулами. Для абсолютного новичка, пожалуйста, укажите «что» и «где», чтобы ввести какой-либо скрипт, если таковой имеется. Спасибо

4. @think123 Каков наилучший способ показать предварительный просмотр MathJax в режиме реального времени на сайте WordPress, на котором есть поле ввода для написания вопросов / комментариев с математическими формулами. Для абсолютного новичка, пожалуйста, укажите «что» и «где», чтобы ввести какой-либо скрипт, если таковой имеется. Спасибо

Ответ №1:

Вместо того, чтобы использовать onchange try onkeypress или onkeyup .

onchange запускается только тогда, когда вы покидаете поле, но остальные (очевидно) происходят с каждым нажатием клавиши.

1. Каков наилучший способ показать предварительный просмотр MathJax в режиме реального времени на сайте WordPress, на котором есть поле ввода для написания вопросов / комментариев с математическими формулами. Для абсолютного новичка, пожалуйста, укажите «что» и «где», чтобы ввести какой-либо скрипт, если таковой имеется. Спасибо

Ответ №2:

Я подозреваю, что вы используете Internet Explorer, который не запускает onchange события так часто или эффективно, как другие браузеры.

Версия в примерах MathJax содержит больше кода для лучшей обработки IE. Возможно, вы захотите посмотреть исходный код для получения подробной информации.

Ответ №3:

 <script type="text/x-mathjax-config">
  MathJax.Hub.Config({tex2jax: {inlineMath: [ ['$','$'], ["\(","\)"] ],processEscapes: true}});
</script>

<script
  type="text/javascript"
  charset="utf-8"
  src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

<script>
function f() {
  var input = document.getElementById("input");
  document.getElementById("output").innerHTML = input.value;
  MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
  }
</script>

<textarea id="input" cols="25" rows="5" onkeyup="f()">
</textarea>

<p id="output"></p>