CODEWITHSUNDEEP
javascriptjquerymathjax
Mark
Mark

Reputation: 8688

Display mathjax output in realtime

How do I modify this mathjax example to live preview while I type? Right now it only displays result after I have pressed enter. I would like to tweak it so that it works similar to how stackoverflow/math.stackexchange shows the preview when typing a question.

<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>

Upvotes: 11

Views: 3882

Answers (3)

Ethan
Ethan

Reputation: 129

<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>

Upvotes: 0

Davide Cervone
Davide Cervone

Reputation: 12250

I suspect you are using Internet Explorer, which doesn't fire onchange events as often or efficiently as other browsers.

The version in the MathJax Examples includes more code to handle IE better. You might want to look at the source code there for details.

Upvotes: 1

nnnnnn
nnnnnn

Reputation: 150040

Instead of using onchange try onkeypress or onkeyup.

onchange is only triggered when you leave the field, but the others (obviously) happen with each key-stroke.

Upvotes: 5

Related Questions