Rendering any math prevents plotly plots from rendering

Describe the bug

context When I write a python notebook with Latex-style math (\begin{align*} \end{align*} or dollar sign math) in a cell above, my plotly figures in a cell below in the same notebook fail to render. They take up the exact space I expect them to, only its white space with nothing there.

I know this is the issue because once I remove the Latex-style math from my notebook, the page renders my plotly figures just fine.

expectation I expected both rendered math and plotly plots in the same notebook to render properly.

bug But instead only the math block renders.

A screenshot of my math block:

Here is a screenshot where I expect my plot:

Here’s my _config.yml file:

# Book settings
# Learn more at https://jupyterbook.org/customize/config.html

title: title
author: authors
logo: images/favicon.png
copyright: "2022"

# Ignore files not named in too
only_build_toc_files: true

# Force re-execution of notebooks on each build.
# See https://jupyterbook.org/content/execute.html
execute:
  execute_notebooks: 'cache'
  # execute_notebooks: "force"
  timeout: 10000
  allow_errors: true

# Parsing math blocks
parse:
  myst_enable_extensions:
    # don't forget to list any other extensions you want enabled,
    # including those that are enabled by default!
    - amsmath
# Define the name of the latex output file for PDF builds
latex:
  latex_documents:
    targetname: book.tex

# Add a bibtex file so that we can create citations
#bibtex_bibfiles:
#  - references.bib

# Information about where the book exists on the web
repository:
  url: https://github.com/richardye101/repo  # Online location of your book
  path_to_book: ../content  # Optional path to your book, relative to the repository root
  branch: main  # Which branch of the repository should be used when creating links (optional)

# Add GitHub buttons to your book
# See https://jupyterbook.org/customize/config.html#add-a-link-to-your-repository
html:
  favicon: "images/favicon.png"
  use_issues_button: true
  use_repository_button: true

# Plotly
sphinx:
  config:
    html_js_files:
    - https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.4/require.min.js

problem This is a problem for people with would like to build pages with both Latex-style math and render plotly plots on the same page because it doesn’t work.

Reproduce the bug

1. Create a notebook with a Latex-style math block in a markdown cell like so:

\begin{align*}
\sum^n_{i=1} x 
\end{align*}

or

$ x = 1$

or

$$
\sum^n_{i=1} x
$$

1. Import and use plotly to create an interactive plot in a code cell below:

import plotly.express as px
from sklearn import datasets
from sklearn.decomposition import PCA

iris = datasets.load_iris()
X = iris.data
y = iris.target
pca = PCA(n_components = 3)
pca_embedding = pca.fit_transform(X)
pca_embedding = pd.DataFrame(pca_embedding, index = y)

fig = px.scatter(pca_embedding, x =0 , y = 1, hover_data={"species": pca_embedding.index},
                     color = pca_embedding.index, width=1100, height=700)
fig.update_layout(legend=dict(
    orientation="h",
    yanchor="bottom",
    y = -.25,
    xanchor="center",
    x = .5
))
fig.show()

### Code also used to plot the 3d plotly figure
fig_3d = px.scatter_3d(pca_embedding, x =0 , y = 1, z = 2, hover_data={"name": pca_embedding.index},
                    color = pca_embedding.index, width=1200, height=700)
fig_3d.update_layout(legend=dict(
        orientation="h",
        yanchor="bottom",
        y = -.25,
        xanchor="center",
        x = .5
    ))
fig_3d.show()

1. Build the book

List your environment

Jupyter Book : 0.12.3 External ToC : 0.2.4 MyST-Parser : 0.15.2 MyST-NB : 0.13.2 Sphinx Book Theme : 0.1.10 Jupyter-Cache : 0.4.3 NbClient : 0.5.13

Python: 3.9.12

macOS Catalina: 10.15.7

[mmcky]

thanks for reporting this @richardye101

@AakashGfude we should look into this re: plotly work that we are doing for themes.

[AakashGfude]

This issue will take a new plotly release to be resolved it seems. According to the thread I raised in plotly https://github.com/plotly/plotly.py/issues/3696 . We will have to wait a bit.