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

44 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
  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.

    ReplyDelete
  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

    ReplyDelete
  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

    ReplyDelete
  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

    ReplyDelete
  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

    ReplyDelete
  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

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


    Python Online Training

    ReplyDelete
  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

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

    ReplyDelete
  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

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

    ReplyDelete
  24. Nice post http://www.selfcarinsurance.com

    ReplyDelete

  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

    ReplyDelete
  26. I have read your blog and i got a very useful and knowledgeable information from your blog.its really a very nice.
    WordPress Development Company | professional web development firm

    ReplyDelete
  27. Such informative and interesting post, thanks for sharing with us.You provide a very interesting blog.Thanks for sharing.keep sharing more blogs.Any body want to build your website

    White Label Website Builder

    ReplyDelete
  28. Wonderful Blog!!! Your post is very informative about Digital Marketing technology. Thank you for sharing the article with us.
    Digital Marketing Course in Chennai | Digital Marketing Training

    ReplyDelete
  29. Your blog is very informative! Thank you for sharing with us about the scope of SEO in today’s Digital world. SEO Training in Chennai | SEO Course in Chennai

    ReplyDelete
  30. I read your article. Very Nice. This is really great and informative post. Thanks for sharing.
    Wordpress Web Development Company In Noida

    ReplyDelete