Thursday, November 27, 2014

How to quickly turn an IPython notebook into a blog post

IPython notebooks are great for many things, but they're a little awkward to embed in blog post platforms like Blogger, Wordpress, etc. When the nbconvert feature was a standalone command-line tool, there was a blog export template, but that seems to have disappeared now that nbconvert has been folded within IPython.

Out of the box, nbconvert just has two html export options:
  • --html
    which includes a lot of CSS that interferes with a blog's CSS, and:
  • --html --template basic
    which has no CSS and so pretty much negates the benefit of using an IPython notebook. However, it does have CSS classess in the text.

My solution was to whip up a quick CSS stylesheet that could be included in the blog post. It seems to work pretty well; you can have a look at:

Note that, for aesthetic reasons, I removed all the
In [1]
-style tags because of the narrow columns on this blog. Your mileage may vary.


1. Convert .ipynb notebook to HTML


In the terminal, navigate to the folder containing the .ipynb file and type:

ipython nbconvert --to html --template basic filename.ipynb

2. Paste HTML in blog


Note: if you're using the Blogger platform, never switch back to the Compose interface after you use the HTML interface, it changes all your tags.

3. Add CSS to blog HTML


This seems to reproduce the native syntax highlighting of IPython.

<style type="text/css">
.highlight{background: #f8f8f8; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .1em;padding:0em .5em;border-radius: 4px;}
.k{color: #338822; font-weight: bold;}
.kn{color: #338822; font-weight: bold;}
.mi{color: #000000;}
.o{color: #000000;}
.ow{color: #BA22FF;  font-weight: bold;}
.nb{color: #338822;}
.n{color: #000000;}
.s{color: #cc2222;}
.se{color: #cc2222; font-weight: bold;}
.si{color: #C06688; font-weight: bold;}
.nn{color: #4D00FF; font-weight: bold;}
</style>
• • •

17 comments:

  1. How can I remove the Out and In prompts, and remove the left padding?

    ReplyDelete
  2. You already know therefore significantly when it comes to this topic, made me in my opinion believe it from numerous various angles. Its like men and women aren’t involved until it is one thing to do with Girl gaga! Your individual stuffs outstanding. Always take care of it up!
    Hut Online Kaufen

    ReplyDelete
  3. Thanks for describing this. Found it useful. Used it in my blog (http://carelesslearner.blogspot.com/). The formatting works well with clean results. Thanks again

    ReplyDelete
  4. Nice information IPython Notebook .I really like Gaming laptops South Africa Its is so cool..

    ReplyDelete
  5. Thank you very much. This really helps.

    ReplyDelete
  6. This comment has been removed by a blog administrator.

    ReplyDelete
  7. That worked for me. Here's an example: http://allendowney.blogspot.com/2016/03/ive-been-busy-with-other-projects-so-i.html

    Thanks!

    ReplyDelete
  8. Thanks for sharing this great article! That is very interesting I love reading and I am always searching for informative information like this. Laptops South Africa

    ReplyDelete
  9. This comment has been removed by the author.

    ReplyDelete
  10. Thank you for sharing, it is very helpful information; I do find CSS is the best tool for web designer.
    regards,
    melbourne web designer

    ReplyDelete
  11. This comment has been removed by a blog administrator.

    ReplyDelete
  12. Thanks. This is super useful. However, I didn't have luck with plots generated using matplotlib. Did you have any luck with matplotlib plots?

    ReplyDelete