How to use Markdown with MathJax like Math StackExchange


How to use Markdown with MathJax like Math StackExchange

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
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()) );

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)

I think I should be looking at But when I try
$text.on(“keyup”, function() {
$preview.html( marked($text.val()) );
var math = MathJax.Hub.getAllJax(“preview”);
MathJax.Hub.Queue([“Text”, math, “a+b”]);


$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.


Solution 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.

Solution 2:

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

        Enable or not mathjax support.
    "enable_mathjax": true

as shown below,

enter image description here

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