Отображение вывода mathjax в реальном времени - PullRequest
8 голосов
/ 28 октября 2011

Как мне изменить этот пример 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>

Ответы [ 2 ]

4 голосов
/ 28 октября 2011

Вместо использования onchange try onkeypress или onkeyup.

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

1 голос
/ 02 апреля 2012

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

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

...