Search code examples
javascripthtmlcssmathjax

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

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.

Solution

  • 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.)