Embed a Jupyter Notebook on this Blog

2014 August 4

Warning: these instructions are old and need revision.

  1. Write up the notebook. Make sure to keep lines short since there isn’t much horizontal room in the blog format.
  2. Run:
    ipython nbconvert --to html notebook.ipynb
  3. Copy the output file to a name like notebook-title.html.
  4. Add tweaks at the end of the CSS, just before the “Custom stylesheet” comment:
    img { max-width: 560px !important: } /* TO BE CONFIRMED */
.prompt { display: none; }
body { padding: 0; }
div.text_cell_render { padding: 0; }
    Font matching is difficult because you can’t bridge CSS et al in iframes, and the outer level has its own magic setup.
  5. Use Zola’s colocated assets to include the notebook HTML, and embed a link emulating this example.

Questions or comments? For better or worse this website isn’t interactive, so send me an email or, uh, Toot me.

To get notified of new posts, try subscribing to my lightweight newsletter or my RSS/Atom feed. No thirsty influencering — you get alerts about what I’m writing; I get warm fuzzies from knowing that someone’s reading!

See a list of all how-to guides.

On GitHub you can propose a revision to this guide or view its revision history.