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;}
• • •


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

  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

  3. Thanks for describing this. Found it useful. Used it in my blog ( The formatting works well with clean results. Thanks again

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

  5. Thank you very much. This really helps.

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

  7. That worked for me. Here's an example:


  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

  9. This comment has been removed by the author.

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

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

  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?

  13. One should always go with the online stores it lets them enjoy heavy discounts on your purchase. So, buy laptop online and get your favorite laptop at an affordable price.

  14. This post is very useful info. This is my first time I visit here. I have found so much interesting stuff in your blog especially its discussion. great article & Keep it up.

    Website Design Company Austin
    austin web design

  15. I think this is an i nformative post and it is very useful and knowledgeable. therefore, I would like to thank you for the efforts you have made in writing this article.

    HTML basics for SEO

  16. These ways are very simple and very much useful, as a beginner level these helped me a lot thanks fore sharing these kinds of useful and knowledgeable information.
    Android App Development Company
    Android App Development Company

  17. Great information about the python note books. Thanks for sharing. Its is very useful for updating the more post. Thanks for sharing..,

    Python Online Training

  18. Hello I am so delighted I located your I really located you by mistake, while I was watching on google for something else, Anyways I am here now and could just like to say thank for a tremendous post and a all round entertaining website. Please do keep up the great work.

    Virtual Edge

  19. Nice blog. Your explaination should be very clear.I really happy to read this blog.Thanks for sharing.

    Python Online Training

  20. After reading this blog I am very strong in this topics and this blog is really helpful to all.. Explanation are very clear so it is easy to understand.. Thanks for sharing this blog…
    Python Training in Chennai | Web Designing Training in Chennai

  21. I think this is an i nformative post and it is very useful and knowledgeable. therefore,
    gclub จีคลับ
    gclub casino

  22. I just want to say that all the information you have given here is awesome...great and nice blog thanks sharing..Thank you very much for this one. And i hope this will be useful for many people.. and i am waiting for your next post keep on updating these kinds of knowledgeable things...
    Web Design Development Company
    Web design Company in Chennai
    Web development Company in Chennai

  23. it is really amazing...thanks for sharing....provide more useful information...
    Mobile app development company

  24. Nice post


  25. Being new to the blogging world I feel like there is still so much to learn. Your tips helped to clarify a few things for me as well

    iOS App Development Company