Update (13 Jan 2016): Added links to the DIY section.

A few days ago I started making my blog posts interactive. It was cool, but required you to surf to a different page for the interactive experience, while the original post was still non-interactive.

Alex pointed out that really you wanted it all in one page. Basically he was:

My blog setup follows Jake Vanderplas' pretty closely. So I created a new liquid_tags plugin that has its own template for nbconvert which generates HTML that thebe understands.

No downloading, no installing, no browsing to a separate page! Just interactive blog posts! (Scroll down to see it in action if you do not care how it was done.)

Do it yourself¶

If you have a pelican site take a look at my fork of the liquid_tags plugin. In addition I made a small gist that shows how to convert notebook to interactive HTML with plain nbconvert . The most important part is using the following template with nbconvert :

{%- extends 'basic.tpl' -%} {% block codecell %} <pre data-executable> {{ cell.source }} </pre> {% endblock codecell %} {% block markdowncell scoped %} <div class="cellOOO border-box-sizing text_cell rendered"> {{ self.empty_in_prompt() }} <div class="inner_cell"> <div class="text_cell_render border-box-sizing rendered_html"> {{ cell.source | markdown2html | strip_files_prefix }} </div> </div> </div> {%- endblock markdowncell %}

It embeds code cells in simple <pre> tags and modifies non-code cells so that they do not match the selectors used inside the notebook machinery. That is it. Then stick a bit of CSS and JS in the <head> of your web page and you are good to go (use the source of this page for inspiration).

Compared to my previous post this setup now only relies on thebe, tmpnb, and the kind people at rackspace who sponsor the computing power for tmpnb .

Below, the work of the jupyter development team, licensed under the 3 clause BSD license.

Get in touch on twitter @betatim.