Skip to content

Embedding interactive Plotly.js plots in Sphinx disables LaTeX rendering via MathJax #2403

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
kordian2k opened this issue Feb 26, 2018 · 3 comments
Closed

Embedding interactive Plotly.js plots in Sphinx disables LaTeX rendering via MathJax #2403

kordian2k opened this issue Feb 26, 2018 · 3 comments

Comments

@kordian2k
Copy link

First of all, thanks for the great set of Plotly libraries!

I would like to embed plots into a Sphinx documentation which makes use of LaTeX via its sphinx.ext.mathjax extension. I do not want to embed the plots as images like jpg in order to keep them interactive.

My strategy to achieve that is to

  • put plotly-latest.min.js into Sphinx' _static folder,
  • embed "ready to use" HTML div elements created in Python via plotly.offline.plot with the include_plotlyjs flag set to False using the .. raw:: html directive,
  • Add a script reference to Plotly.js into each HTML file's head element using the following code snipped in Sphinx' _templates folder:
{% extends "!layout.html" %}

{%- block extrahead %}
 <script type="text/javascript" src="_static/plotly-latest.min.js"></script>
{% endblock %}

With that strategy the generated html file include the following script tags:

  • <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7./MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>,
  • <script type="text/javascript" src="_static/plotly-latest.min.js"></script>.

While Plotly's plots are shown as expected, LaTeX embeddings using the :math: directive do not render anymore.

Is there any way to use the same MathJax profile in Plotly.js as in Sphinx?
@alexcjohnson alexcjohnson mentioned this issue Sep 11, 2018
Merged
@kordian2k
Copy link
Author

Until this issue is resolved a work-around is to embed the div element into an empty HTML site

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="plotly-latest.min.js"></script>
    <title>Plot example</title>
</head>
<body>
<div generated by Plotly ...
</body>
</html>

and to include this file as an iframe into your documentation:

.. raw:: html

    <iframe src="../_static/site.html" height="500px" width="100%"></iframe>

This way both MathJax profiles do not interfere with each other.

@jonmmease
Copy link
Contributor

This has been addressed in plotly.js 1.42 by #2994. You'll need to set window.PlotlyConfig = {MathJaxConfig: 'local'} before loading plotly.js. Also, the MathJax config doesn't need to be set to TeX-AMS-MML_SVG anymore (plotly.js will internally set and restore the configuration each time it uses MathJax). It just needs to be set to some configuration that includes TeX, so you can use whatever config makes Sphinx happy.

See https://github.com/plotly/plotly.js/blob/master/dist/README.md#to-support-mathjax for more information. Thanks!

@kordian2k
Copy link
Author

Works like a charm. Thanks!

@thclark thclark mentioned this issue Feb 6, 2019
Open
@vilim vilim mentioned this issue Jun 3, 2020
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@jonmmease @kordian2k