MathJax in StackEdit.md

Markdown input

$$
\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.
$$

HTML output

<p><span class="MathJax_Preview"></span><div class="MathJax_Display" role="textbox" aria-readonly="true" style="text-align: center;"><span class="MathJax" id="MathJax-Element-11-Frame" style=""><nobr><span class="math" id="MathJax-Span-241" style="width: 12.215em; display: inline-block;"><span style="display: inline-block; position: relative; width: 9.853em; height: 0px; font-size: 124%;"><span style="position: absolute; clip: rect(0.637em 1000.003em 3.286em -0.516em); top: -2.186em; left: 0.003em;"><span class="mrow" id="MathJax-Span-242"><span class="mi" id="MathJax-Span-243" style="font-family: MathJax_Main;">Γ</span><span class="mo" id="MathJax-Span-244" style="font-family: MathJax_Main;">(</span><span class="mi" id="MathJax-Span-245" style="font-family: MathJax_Math; font-style: italic;">z<span style="display: inline-block; overflow: hidden; height: 1px; width: 0.003em;"></span></span><span class="mo" id="MathJax-Span-246" style="font-family: MathJax_Main;">)</span><span class="mo" id="MathJax-Span-247" style="font-family: MathJax_Main; padding-left: 0.291em;">=</span><span class="msubsup" id="MathJax-Span-248" style="padding-left: 0.291em;"><span style="display: inline-block; position: relative; width: 1.961em; height: 0px;"><span style="position: absolute; clip: rect(1.616em 1000.003em 4.208em -0.458em); top: -3.165em; left: 0.003em;"><span class="mo" id="MathJax-Span-249" style="font-family: MathJax_Size2; vertical-align: 0.003em;">∫<span style="display: inline-block; overflow: hidden; height: 1px; width: 0.406em;"></span></span><span style="display: inline-block; width: 0px; height: 3.171em;"></span></span><span style="position: absolute; clip: rect(1.731em 1000.003em 2.365em -0.458em); top: -3.281em; left: 1.213em;"><span class="mi" id="MathJax-Span-250" style="font-size: 70.7%; font-family: MathJax_Main;">∞</span><span style="display: inline-block; width: 0px; height: 2.192em;"></span></span><span style="position: absolute; clip: rect(1.558em 1000.003em 2.365em -0.516em); top: -1.264em; left: 0.637em;"><span class="mn" id="MathJax-Span-251" style="font-size: 70.7%; font-family: MathJax_Main;">0</span><span style="display: inline-block; width: 0px; height: 2.192em;"></span></span></span></span><span class="msubsup" id="MathJax-Span-252" style="padding-left: 0.176em;"><span style="display: inline-block; position: relative; width: 1.789em; height: 0px;"><span style="position: absolute; clip: rect(1.385em 1000.003em 2.365em -0.516em); top: -2.186em; left: 0.003em;"><span class="mi" id="MathJax-Span-253" style="font-family: MathJax_Math; font-style: italic;">t</span><span style="display: inline-block; width: 0px; height: 2.192em;"></span></span><span style="position: absolute; top: -2.589em; left: 0.406em;"><span class="texatom" id="MathJax-Span-254"><span class="mrow" id="MathJax-Span-255"><span class="mi" id="MathJax-Span-256" style="font-size: 70.7%; font-family: MathJax_Math; font-style: italic;">z<span style="display: inline-block; overflow: hidden; height: 1px; width: 0.003em;"></span></span><span class="mo" id="MathJax-Span-257" style="font-size: 70.7%; font-family: MathJax_Main;">−</span><span class="mn" id="MathJax-Span-258" style="font-size: 70.7%; font-family: MathJax_Main;">1</span></span></span><span style="display: inline-block; width: 0px; height: 2.192em;"></span></span></span></span><span class="msubsup" id="MathJax-Span-259"><span style="display: inline-block; position: relative; width: 1.328em; height: 0px;"><span style="position: absolute; clip: rect(1.558em 1000.003em 2.365em -0.458em); top: -2.186em; left: 0.003em;"><span class="mi" id="MathJax-Span-260" style="font-family: MathJax_Math; font-style: italic;">e</span><span style="display: inline-block; width: 0px; height: 2.192em;"></span></span><span style="position: absolute; top: -2.589em; left: 0.464em;"><span class="texatom" id="MathJax-Span-261"><span class="mrow" id="MathJax-Span-262"><span class="mo" id="MathJax-Span-263" style="font-size: 70.7%; font-family: MathJax_Main;">−</span><span class="mi" id="MathJax-Span-264" style="font-size: 70.7%; font-family: MathJax_Math; font-style: italic;">t</span></span></span><span style="display: inline-block; width: 0px; height: 2.192em;"></span></span></span></span><span class="mi" id="MathJax-Span-265" style="font-family: MathJax_Math; font-style: italic;">d<span style="display: inline-block; overflow: hidden; height: 1px; width: 0.003em;"></span></span><span class="mi" id="MathJax-Span-266" style="font-family: MathJax_Math; font-style: italic;">t</span><span class="mspace" id="MathJax-Span-267" style="height: 0.003em; vertical-align: 0.003em; width: 0.176em; display: inline-block; overflow: hidden;"></span><span class="mo" id="MathJax-Span-268" style="font-family: MathJax_Main;">.</span></span><span style="display: inline-block; width: 0px; height: 2.192em;"></span></span></span><span style="border-left-width: 0.004em; border-left-style: solid; display: inline-block; overflow: hidden; width: 0px; height: 3.004em; vertical-align: -1.211em;"></span></span></nobr></span></div><script type="math/tex; mode=display" id="MathJax-Element-11">
\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.
</script></p>

Template output:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>LaTex mathematical expressions</title>
<link rel="stylesheet" href="http://benweet.github.io/stackedit/css/main-min.css" />
<script type="text/javascript" src="http://benweet.github.io/stackedit/lib/MathJax/MathJax.js?config=TeX-AMS_HTML"></script>
</head>
<body><p><span class="MathJax_Preview"></span><div class="MathJax_Display" role="textbox" aria-readonly="true" style="text-align: center;"><span class="MathJax" id="MathJax-Element-11-Frame" style=""><nobr><span class="math" id="MathJax-Span-241" style="width: 12.215em; display: inline-block;"><span style="display: inline-block; position: relative; width: 9.853em; height: 0px; font-size: 124%;"><span style="position: absolute; clip: rect(0.637em 1000.003em 3.286em -0.516em); top: -2.186em; left: 0.003em;"><span class="mrow" id="MathJax-Span-242"><span class="mi" id="MathJax-Span-243" style="font-family: MathJax_Main;">Γ</span><span class="mo" id="MathJax-Span-244" style="font-family: MathJax_Main;">(</span><span class="mi" id="MathJax-Span-245" style="font-family: MathJax_Math; font-style: italic;">z<span style="display: inline-block; overflow: hidden; height: 1px; width: 0.003em;"></span></span><span class="mo" id="MathJax-Span-246" style="font-family: MathJax_Main;">)</span><span class="mo" id="MathJax-Span-247" style="font-family: MathJax_Main; padding-left: 0.291em;">=</span><span class="msubsup" id="MathJax-Span-248" style="padding-left: 0.291em;"><span style="display: inline-block; position: relative; width: 1.961em; height: 0px;"><span style="position: absolute; clip: rect(1.616em 1000.003em 4.208em -0.458em); top: -3.165em; left: 0.003em;"><span class="mo" id="MathJax-Span-249" style="font-family: MathJax_Size2; vertical-align: 0.003em;">∫<span style="display: inline-block; overflow: hidden; height: 1px; width: 0.406em;"></span></span><span style="display: inline-block; width: 0px; height: 3.171em;"></span></span><span style="position: absolute; clip: rect(1.731em 1000.003em 2.365em -0.458em); top: -3.281em; left: 1.213em;"><span class="mi" id="MathJax-Span-250" style="font-size: 70.7%; font-family: MathJax_Main;">∞</span><span style="display: inline-block; width: 0px; height: 2.192em;"></span></span><span style="position: absolute; clip: rect(1.558em 1000.003em 2.365em -0.516em); top: -1.264em; left: 0.637em;"><span class="mn" id="MathJax-Span-251" style="font-size: 70.7%; font-family: MathJax_Main;">0</span><span style="display: inline-block; width: 0px; height: 2.192em;"></span></span></span></span><span class="msubsup" id="MathJax-Span-252" style="padding-left: 0.176em;"><span style="display: inline-block; position: relative; width: 1.789em; height: 0px;"><span style="position: absolute; clip: rect(1.385em 1000.003em 2.365em -0.516em); top: -2.186em; left: 0.003em;"><span class="mi" id="MathJax-Span-253" style="font-family: MathJax_Math; font-style: italic;">t</span><span style="display: inline-block; width: 0px; height: 2.192em;"></span></span><span style="position: absolute; top: -2.589em; left: 0.406em;"><span class="texatom" id="MathJax-Span-254"><span class="mrow" id="MathJax-Span-255"><span class="mi" id="MathJax-Span-256" style="font-size: 70.7%; font-family: MathJax_Math; font-style: italic;">z<span style="display: inline-block; overflow: hidden; height: 1px; width: 0.003em;"></span></span><span class="mo" id="MathJax-Span-257" style="font-size: 70.7%; font-family: MathJax_Main;">−</span><span class="mn" id="MathJax-Span-258" style="font-size: 70.7%; font-family: MathJax_Main;">1</span></span></span><span style="display: inline-block; width: 0px; height: 2.192em;"></span></span></span></span><span class="msubsup" id="MathJax-Span-259"><span style="display: inline-block; position: relative; width: 1.328em; height: 0px;"><span style="position: absolute; clip: rect(1.558em 1000.003em 2.365em -0.458em); top: -2.186em; left: 0.003em;"><span class="mi" id="MathJax-Span-260" style="font-family: MathJax_Math; font-style: italic;">e</span><span style="display: inline-block; width: 0px; height: 2.192em;"></span></span><span style="position: absolute; top: -2.589em; left: 0.464em;"><span class="texatom" id="MathJax-Span-261"><span class="mrow" id="MathJax-Span-262"><span class="mo" id="MathJax-Span-263" style="font-size: 70.7%; font-family: MathJax_Main;">−</span><span class="mi" id="MathJax-Span-264" style="font-size: 70.7%; font-family: MathJax_Math; font-style: italic;">t</span></span></span><span style="display: inline-block; width: 0px; height: 2.192em;"></span></span></span></span><span class="mi" id="MathJax-Span-265" style="font-family: MathJax_Math; font-style: italic;">d<span style="display: inline-block; overflow: hidden; height: 1px; width: 0.003em;"></span></span><span class="mi" id="MathJax-Span-266" style="font-family: MathJax_Math; font-style: italic;">t</span><span class="mspace" id="MathJax-Span-267" style="height: 0.003em; vertical-align: 0.003em; width: 0.176em; display: inline-block; overflow: hidden;"></span><span class="mo" id="MathJax-Span-268" style="font-family: MathJax_Main;">.</span></span><span style="display: inline-block; width: 0px; height: 2.192em;"></span></span></span><span style="border-left-width: 0.004em; border-left-style: solid; display: inline-block; overflow: hidden; width: 0px; height: 3.004em; vertical-align: -1.211em;"></span></span></nobr></span></div><script type="math/tex; mode=display" id="MathJax-Element-11">
\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.
</script></p></body>
</html>

Hi MathJax,

Here is an example of MathJax use in StackEdit. Both HTML output and template output are generated after MathJax conversion. Considering the template output, do you think it's ok to re-run MathJax.js on the post processed output?

I suppose MathJax_Display div can be generated another time with the MathJax-Element script. Am I wrong?

Thanks

Hi Ben,

I'm responding for the MathJax team. Yes, that should work but I'd suggest storing either MathML or TeX or SVG (but more on SVG later).

What MathJax actually always does is replace whatever is in the MathJax_Preview class (like an image rendering) with its rendering -- but only if a script element with the math/... type is right behind the preview class (no whitespace or anything separating the two).

However, I've noticed a few issues when switching to SVG-output via the MathJax menu. MathJax stores paths globally and re-uses them in equations. I think the export does not keep that global object, so the SVG-output breaks (while it would actually be a better and more stable export). I think that's why something goes wrong when MathJax runs on that export (which actually shouldn't happen so I'll look into that).

Hi PKRA

Thank you for your reply. I will stick to HTML rendering then...

Regards

That makes sense. The "right" alternative would be MathML, I guess (as it's part of HTML5). Great project, btw!

@pkra I'm trying to implement a partial rendering on StackEdit, so that Markdown and MathJax is performed only on modified paragraphs. I actually have something working (more or less) but I noticed that to be really efficient, I have to disable MathJax rendering on MathJax elements that are already converted . So I put something like that in my code before the typeset:

$('script[type="math/tex; mode=display"]').remove();

But I don't really like to remove these scripts. I was wandering if there was a way to tell MathJax to ignore them?

Thanks in advance.

Ok, I don't remember how you synchronize with MathJax. If you're using MathJax.Hub.Queue(["Typeset",MathJax.Hub]); , then MathJax shouldn't re-render elements that it has rendered already ("Rerender" does that, see http://docs.mathjax.org/en/latest/typeset.html. But it's still inefficient in that it checks the entire page for new math. You can specify DOM elements to have MathJax typeset only within them.

Regarding "prevention", there's the ignoreClass configuration option from the TeX preprocessor, see http://docs.mathjax.org/en/latest/options/tex2jax.html

Does that help?