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:
- an IPython notebook in nbviewer of a recent blog post of mine
- the blog version after applying this stylesheet.
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>