Plotly Disables Latex Rendering in HTML output of Jupyter Notebook

[SafwanAhmad]

In my limited understanding of Javascript it seems like a plotly.js or an NbConvert bug.

Plotly is using the following configuration option for MathJax:
MathJax.Hub.Config({messageStyle:"none",skipStartupTypeset:!0

Looking at the code here and in light of the MathJax documentation here it's more of a Plotly issue IMHO than a bug in Nbconvert.

 MathJax.Hub.Queue(['Typeset', MathJax.Hub, tmpDiv.node()], function() {
        var glyphDefs = d3.select('body').select('#MathJax_SVG_glyphs');

        if(tmpDiv.select('.MathJax_SVG').empty() || !tmpDiv.select('svg').node()) {
            Lib.log('There was an error in the tex syntax.', _texString);
            _callback();
        }
        else {
            var svgBBox = tmpDiv.select('svg').node().getBoundingClientRect();
            _callback(tmpDiv.select('.MathJax_SVG'), glyphDefs, svgBBox);
        }

        tmpDiv.remove();
    });

Only Latex inside a particular DIV element is queued for Mathjax rendering by Plotly. This makes sense but combined with the configuration above, perhaps, disables automatic rendering in the rest of the page. Nbconvert's HTML seems to rely on this document-wide auto rendering.

[alexcjohnson]

Thanks @SafwanAhmad - seems to me this is also problematic as we need MathJax to render SVG, while nbconvert wants HTML. I guess we will need to do some gymnastics to figure out whether anyone else on the page needs MathJax, and work around that. It's not obvious to me how to tell whether MathJax is configured for SVG or some other output, but I assume there's a way...

One possible short-term workaround, if you want LaTeX in your page but don't need it in your plotly plots, we could try and find a way to short-circuit Plotly's MathJax config, or at least defer it until it's actually invoked.

[alexcjohnson]

Possibly useful: https://github.com/mathjax/MathJax-docs/wiki/Using-different-mathjax-renderers-on-one-page

[akhmerov]

Following @alexcjohnson's link, and after a bit of trial and error, I was able to embed plotly plots into a website that configures its own mathjax by using the following:

window.addEventListener('load', function() {
  MathJax.Hub.Queue(
    ["setRenderer",MathJax.Hub,"SVG"]
  );
  Plotly.d3.json('/{{plotly_url}}', function(error, fig) {
    Plotly.plot('{{div_id}}', fig.data, fig.layout);
  MathJax.Hub.Queue(
    ["setRenderer",MathJax.Hub,"HTMLCSS-output"]
  );
  });
});

It isn't pretty, but it is sufficient in my limited context.

[anil-ganti]

@akhmerov what is the limited context that your solution works in? I haven't been able to get this working in my context, which is a Jupyter notebook that I've converted to Markdown, then turning into a Jekyll post by adding the needed front matter and including both Mathjax and Plotly support following this post

[akhmerov]

@anil-ganti compiling a bunch of markdown files with inline code into a static website. Business logic here

[jonmmease]

This has been addressed in plotly.js 1.42 by #2994. You'll need to set window.PlotlyConfig = {MathJaxConfig: 'local'} before loading plotly.js. See https://github.com/plotly/plotly.js/blob/master/dist/README.md#to-support-mathjax for more information. Thanks!