javascript - 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=".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>

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

Share Improve this question edited Oct 28, 2011 at 5:57 asked Oct 28, 2011 at 5:49 Mark 8,68815 gold badges62 silver badges85 bronze badges

yeah, because onchange only fires when the enter key is pressed or when the field is blurred. – Zerium Commented Aug 24, 2012 at 9:15
Note from the future: cdn.mathjax is nearing its end-of-life, check mathjax/cdn-shutting-down for migration tips. – Peter Krautzberger Commented Apr 12, 2017 at 8:57
@PeterKrautzberger What is the best way to show live preview of MathJax in a wordpress site which has input field for writing question/ments with math formulas. For absolute beginner, please guide "what" and "where" to type some script, if any. Thanks – user12345 Commented Apr 28, 2017 at 15:07
@think123 What is the best way to show live preview of MathJax in a wordpress site which has input field for writing question/ments with math formulas. For absolute beginner, please guide "what" and "where" to type some script, if any. Thanks – user12345 Commented Apr 28, 2017 at 15:07

Add a ment |

3 Answers 3

Sorted by: Reset to default 5

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.

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.

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Display mathjax output in realtime - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)