let PageDown and MathJax work together
jquery, mathjax, pagedown
Solution
I've created a basic example for how to get Pagedown and MathJax working together using a slight modification of Stack Exchange's mathjax-editing.js.
Stack Exchange's code is based on Davide Cervone's, see his comment on another answer.
The code for the example can be viewed on github.
Problem
I am implementing a UI which is supposed to look pretty much like the one on math.stackexchange.com: - Using fancy Markdown like you are used to on stackoverflow - Parsing formulars using MathJax between `$`...`$`-signs. So I downloaded the PageDown demo and set it up, which works pretty well. Now I try to let MathJax being loaded dynamically everytime the `<textarea>`changes. MathJax got an example for this approach but I'm not able to get it running. This is what 'my' code looks like: ``` <link rel="stylesheet" type="text/css" href="demo.css" /> <script type="text/javascript" src="../../Markdown.Converter.js"></script> <script type="text/javascript" src="../../Markdown.Sanitizer.js"></script> <script type="text/javascript" src="../../Markdown.Editor.js"></script> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js"></script> <script type="text/x-mathjax-config"> MathJax.Hub.Config({ tex2jax: { inlineMath: [["$","$"],["\\(","\\)"]] } }); $("#wmd-input").keypress(function(event){ UpdateMath($(this).val()); }); </script> <script type="text/javascript" src="../../../mathjax-MathJax-07669ac/MathJax.js?config=TeX-AMS_HTML-full"> </script> </head> <body> <script> (function () { var QUEUE = MathJax.Hub.queue; // shorthand for the queue var math = null; // the element jax for the math output. QUEUE.Push(function () { math = MathJax.Hub.getAllJax("#wmd-preview")[0]; }); window.UpdateMath = function (TeX) { QUEUE.Push(["Text",math,"\\displaystyle{"+TeX+"}"]); } })(); </script> <div class="wmd-panel"> <div id="wmd-button-bar"></div> <textarea class="wmd-input" id="wmd-input" value=""/> </textarea> </div> <div id="wmd-preview" class="wmd-panel wmd-preview"></div> <br /> <br /> <script type="text/javascript">(function () { var converter1 = Markdown.getSanitizingConverter(); var editor1 = new Markdown.Editor(converter1); editor1.run(); })(); </script> </body> ``` This snippet should update the preview everytime the `keypress` event is fired. Instead on page onload the tex is rendered fine but as soon as I start typing the `$`...`$`code is printed in the preview box.