Menu
I am implementing a UI which is supposed to look pretty much like the one on math.stackexchange.com:
$...$-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.
559
There are several problems with your current setup. First, the example you have borrowed from is an example of updating a single equation, not paragraphs that includes multiple equations. For that, you would need to consider the second dynamic example (from the MathJax examples page). You should be getting an error message in your browser console that will have to do with a null value (math will be null unless you start out with some math in the editor to begin with).
But there is a second issue, which is that the wmd editor will be updating the wmd-preview area, and you should coordinate with it to do the MathJax updating, as otherwise it might change the content of the div while MathJax is working on it. Wmd is also smarter about when it does updates than just on every keypress (e.g., arrow keys don't cause updates), so it will be more efficient to coordinate as well. The SE version of wmd has hooks to allow you to do that, and I suspect the one you are using does as well.
Finally, you are going to have to do more work to protect the mathematics from the Markdown engine so that things like underscores and backslashes don't get processed by Markdown when they appear in mathematics. That is a bit tricky, but without that, you will run into lots of problems with your TeX code not getting processed properly.
To deal with the last two issues, you might consider looking at the code used by MSE for hooking MathJax into wmd. Perhaps that will give you some clues about how to do it.
62
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
