Converting NB to HTML and embedding in website without breaking CSS

[DrChrisLevy]

Yes, I am a noob. I have a nice looking squarespace website --> chrisdlevy.com I want to embed some jupyter notebooks on some of the pages within my website. I want to keep the style of my website but I want the notebooks to look like jupyter notebooks as well. So far, I just end up breaking the style of my website because all the CSS from the NB clashes with the CSS from the squarespace website.

Exporting the NB to html generates tons of css and I know I dont need it all. What is essential in the CSS from the NB export to HTML and whats not?

Hope this makes sense and any comments are appreciated.

I reached out to Matthias Bussonnier on Twitter and his reply was: Whould have 2 css in notebook repo. App and minimal. Ask on github for longer discussion.

Not sure what that means..

[takluyver]

There are two HTML templates for nbconvert. The default is 'full', which constructs an entire page. The 'basic' template constructs HTML with a view to embedding it in an existing page. You can use that by specifying --template basic on the command line for nbconvert. However, I think that includes none of the CSS to style the notebook, so you'd need to include some of the notebook CSS in your page, and I don't think there's any documentation of what you need or where to get it.

A simple workaround would be to convert notebooks with the default 'full' template, and embed the notebook in another page using an iframe.

[DrChrisLevy]

thanks!

yes I played around with the basic html vs full blown out CSS.

I thought of doing the iframe thing but never tried it. I will now. Thanks again!

[rgommers]

A simple workaround would be to convert notebooks with the default 'full' template, and embed the notebook in another page using an iframe.

This still seems to be problematic. Are there better practices these days than putting everything in an iframe?

[pwais]

I landed here trying to search around for the same thing as the original poster.

for the lazyweb, there's now the fastai blogging template that supports automatically converting jupyter notebooks into posts that Jekyll can render. See https://github.com/fastai/fast_template/blob/3215094f0a794832ab6e9731c5694431a5eb5943/_notebooks/README.md

This sort of works, but I'm trying to embed Bokeh plots which sadly get dropped. Anyways, hope the link above might help somebody.

[ChelsyMena]

Hello! 7 years later... is there a simple way to do this? I too prefer the basic template but would like to render the code better and don't know which bit of the full output css to copy from there to paste in the basic's style.

[pwais]

fwiw i ended up just Save Notebook as HTML from the jupyter WebUI and I embed the thing as an iframe in a blog post. here's an example https://pwais.github.io/oarph-oarphs/2023/01/21/hist-with-examples.html

in that post, bokeh also got completely inlined

For lazyweb: idk these days for rich blogs maybe the better options are like:

• Binder
  • https://mybinder.org/
  • example of launching a notebook https://mybinder.org/v2/gh/binder-examples/jupyterlab/HEAD?filepath=/index.ipynb
    • observable notebooks https://observablehq.com/
    • hugginface? e.g. with a gradio inference interface

[ChelsyMena]

I did try the iframe last night but it was still not playing nice with the css of the site I want it in. Yours looks like just what I need though, but I need it on the right of the page, not the bottom. How did you do it? I had the html in one file and put it in a div in the site I want it like <div><iframe src="htmlroute"></iframe></div> anything else I write in that

appears especifically in the section of the page i want it, but the notebooks somehow spill into the right panel I have unless I use the basic template to export and in that case the code indent is mess up and there's no formatting lol

These other options you send are a bit overkill for what I'm doing to be honest. I might just end up going through the trouble to write a new article based on the notebook with Obsidian md and exporting that to html

Chelsy Mena Ingeniera de Petróleos (+57) 314 6727542

On Wed, Jul 5, 2023 at 10:50 PM Paul Wais @.***> wrote:

fwiw i ended up just Save Notebook as HTML from the jupyter WebUI and I embed the thing as an iframe in a blog post. here's an example https://pwais.github.io/oarph-oarphs/2023/01/21/hist-with-examples.html

in that post, bokeh also got completely inlined

For lazyweb: idk these days for rich blogs maybe the better options are like:

• Binder
  • https://mybinder.org/
  • example of launching a notebook https://mybinder.org/v2/gh/binder-examples/jupyterlab/HEAD?filepath=/index.ipynb
• observable notebooks https://observablehq.com/
• hugginface? e.g. with a gradio inference interface

— Reply to this email directly, view it on GitHub https://github.com/jupyter/nbconvert/issues/226#issuecomment-1622930738, or unsubscribe https://github.com/notifications/unsubscribe-auth/APUTIMIRTR6L3A65XAWNFFLXOYYXJANCNFSM4B2IODQA . You are receiving this because you commented.Message ID: @.***>