How to get MathJax's HTML output just like Stackedit.io?

Question

I know I can use

MathJax.Hub.Queue(["Typeset", MathJax.Hub, "displayArea"]);

to process. But I don't know how to get the output HTML (I want to save the output in a variable in Javascript).

Moreover, I want this HTML is independent to MathJax's stylesheets. By independent, I mean like HTML output of stackedit.io. The output of stackedit is self-containt. It don't need any other CSS or JS.

Please give me some help on this problem. Thanks.

Answer 1

Output of Stackedit is not exactly self-contained. It says "Make sure you include MathJax into your publications to render mathematical expression correctly."

• Doing "Save as HTML" does not load MJ and contains the browser-specific mathjax rendering. E.g. I saved with Chrome => looks fine in Chrome but a mess in FF: ╬У(n)=(nтИТ1)!
• Doing "Save using template" does load MathJax.js and works fine (it still includes browser-specific rendering, but MJ finds the <script type="math/tex" ... tags with original math and re-renders).

See MathJax Output Formats about portability.
Unfortunately there is no single solution that works well in all browsers. I think your best bet is SVG output (IE9+; size relative to text may be off).

• https://github.com/agrbin/svgtex (and its forks) automate server-side SVG generation. After grabbing the output (getElementsByTagName("svg")) it does some less trivial stuff to produce a self-contained SVG; same would be needed if doing it client-side.

I also wonder if HTML-CSS output can become more portable on a page using a thorough CSS reset. I haven't read anybody investigating it — though I guess if it were that easy, the MathJax devs would have done it long ago...

Another deal-breaker with HTML-CSS is fonts. If you really can't load external resources, you must embed them as base64 data: URLs. The full fonts are too heavy, so you'll want to subset fonts on the fly — scary... (With SVG output embedding glyphs is much easier, as I linked above svgtex does it in 25 lines and gives you a single SVG image.)

Answer 2

The answer is quite simple. Just use

MathJax.Hub.Queue(["Typeset", MathJax.Hub, "displayArea"]);

and then use jQuery

var text = $("#displayArea").html();

Done!