Milla Well - 9 months ago 43

jQuery Question

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

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`

`$`

`$`

Answer Source

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.