Hi! I had the same issue, and HTML(fig.to_html())
does not work for me (plotly 4.14.3, classical notebook). Jekyll just fails to generate the html page (Error: error parsing fragment (1)
).
However going through Colab worked as @drscotthawley mentioned. I’ve inspected the notebooks before/after to understand, and it turns out that plotly has different renderers. It usually defaults to plotly_mimetype+notebook
, but it is set to a special colab
renderer when used there. Interestingly that renderer generates code that loads plotly.js from a CDN instead of embedding it into the notebook, and then jekyll is much happier with that 30k input instead of 3MB of plotly code.
So the first solution that worked for me was to change the default renderer to colab locally too with a cell at the top:
import plotly.io as pio
pio.renderers.default = 'colab'
The problem with that is that we don’t get any output in a classical local notebook. However I found that setting the renderer to only notebook
or notebook_connected
(to use a CDN) makes Jekyll happy too as the guilty code was generated by plotly_mimetype
. But then the generated HTML raised errors about require
being undefined, so I had to add code to load require.js
.
This is my current final top-cell that makes it work both in the local notebook and in the generated HTML:
# hide_input
# This cell is required for the export to HTML to work.
import plotly.io as pio
# Default is plotly_mimetype+notebook, but jekyll fails to parse plotly_mimetype.
pio.renderers.default = 'notebook_connected'
# Uncomment below to avoid using a CDN for plotly.js
# pio.renderers.default = 'notebook'
# Inject the missing require.js dependency.
from IPython.display import display, HTML
js = '<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js" integrity="sha512-c3Nl8+7g4LMSTdrm621y7kf9v3SDPnhxLNhcjFJbKECVnmZHTdo+IRO05sNLTH/D3vA6u1X32ehoLC7WFVdheg==" crossorigin="anonymous"></script>'
display(HTML(js))
Hope this helps!