How to use Markdown with MathJax like Math StackExchange

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.

Doing MathJax before markdown is clever (markdown passes html through) but means that math will be rendered *everywhere*. For example it's unclear that you want it rendered in `literal` text. — Beni Cherniavsky-Paskin, Mar 10 '14 at 08:45
Does this answer your question? [let PageDown and MathJax work together](https://stackoverflow.com/questions/11228558/let-pagedown-and-mathjax-work-together) — TylerH, Oct 08 '20 at 14:29

score 5 · Accepted Answer · edited May 23 '17 at 12:25

5

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.

edited May 23 '17 at 12:25

Community

1
1

answered Aug 24 '12 at 22:22

Peter Krautzberger

5,145
19
31

score 0 · Answer 2 · edited May 23 '17 at 11:46

0

For sublime, add the following code to Markdown Preview --> Settings - User,

{
    /*
        Enable or not mathjax support.
    */
    "enable_mathjax": true
}

as shown below,

Refer to How to enable MathJax rendering in Sublimetext Markdown Preview.

edited May 23 '17 at 11:46

Community

1
1

answered Feb 10 '17 at 14:35

SparkAndShine

17,001
22
90
134

How to use Markdown with MathJax like Math StackExchange

2 Answers2