原文: prooffreader plus: 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>

是也乎

原来… IPy[:] notebook 天然就内置了这种能力!

Changelog

  • 160322 @TANG ZhiXiong 提醒:
    • 其实放在 GitHub,然后分享一个 Jupyter 链接是最好的
    • 是也乎 这的确是 2015-7 之后更好的解决方案了 ;-)
  • 140107 move into Pelican as zoomquiet.io
  • 131106 pub. EKR to Chinese programmer — I. M. H. O.— Medium

Comments

comments powered by Disqus

© Copyright 2014 by Zoom.Quiet
Content licensed under the Creative Commons attribution-noncommercial-sharealike License.
Contact me via , mail ,github or bitbucket . Tip me via gittip . (feed)