Question

UPDATED POST

Ok I’ve managed to make Markdown and MathJax work together, it was relatively simple actually. I’ve used marked together with MathJax.

$(function() {
    var $text       = $("#text"), // the markdown textarea
        $preview    = $("#preview"); // the preview div

    $text.on("keyup", function() {
        $preview.html( marked($text.val()) ); // parse markdown
        MathJax.Hub.Queue(["Typeset", MathJax.Hub, "preview"]); // then let MathJax do its job
    })
});

Problem now is: I think markdown is parsing my math 1st before MathJax can change it. How do i fix this? I think its fixed on Math StackOverflow, but how? I need to stop markdown from parsing math

UPDATE 2

This works, but not sure if its the way math.stackexchange does it, but it seems to produce similar/same results with what I tested so far …

$(function() {
    var $text       = $("#text"),
        $preview    = $("#preview");

    $text.on("keyup", function() {
        $preview.html( $text.val() );
        MathJax.Hub.Queue(["Typeset", MathJax.Hub, "preview"]);
    });

    MathJax.Hub.Register.MessageHook("End Process", function (message) {
        $preview.html( marked($preview.html()) );
    });
});

---

OLD POST BELOW

In the math stackexchange, I can use MathJax with Markdown. I wonder what do I need to do that? I can use a library like marked to render Markdown, but for MathJax, it seems like it just renders on page loads. How can I call it to re-render or better just render whats needed (specified by me)

html = marked("some markdown string") // a HTML string
// is there something like
html = MathJax.parse(html)

---

UPDATE

I think I should be looking at http://www.mathjax.org/docs/1.1/typeset.html#manipulating-individual-math-elements. But when I try

$text.on("keyup", function() {
    $preview.html( marked($text.val()) );
    var math = MathJax.Hub.getAllJax("preview");
    console.log(math);
    MathJax.Hub.Queue(["Text", math, "a+b"]);
})

Where:

• $text: is the jQuery element for my textarea
• $preview: is the preview div

I find that math is undefined, so it seems var math = MathJax.Hub.getAllJax("preview") is not working. I have a div#preview btw.

Answer 1

The fastest way is to protect the math from your markdown-parser.

See this question for a detailed answer by Davide Cervone, including a link to the code used by math.SE.