So I wanted to to add an IPython notebook within a WordPress blog post. The first thing I tried was exporting directly to HTML, and copying the HTML directly within the WordPress post. This sort of worked. However, it was very slow to copy all the HTML into the post and the formatting looked terrible.
Then I came across a way to do so, which you can read about here.
The basic idea from above is to export the IPython notebook to HTML, upload it somewhere on your site, and then use an “iframe” to embed the IPython notebook HTML within the WordPress blog post. The author of the above then wrote some javascript to handle sizing issues.
However, I did not want people to be able to directly access the IPython notebook HTML page (if say google indexed it). Rather I want to direct people to the actual WordPress post.
So in the end, I simply add some javascript to the IPython notebook to redirect to the WordPress blog post.
Here are the steps to add an IPython notebook to a WordPress blog post:
Before you start:
0) Install the “raw” plugin for WordPress
https://en-ca.wordpress.org/plugins/raw-html/
In WordPress:
1) In WordPress, start a blog post and get the full link to the post e.g.,
In IPython:
2) Create an IPython notebook and name it “ipython_in_wordpress_blog”
3) Add this chunk of JavaScript in a Raw NBConvert cell at the start (replace my URL with your own),
<code><script> var myUrl = 'http://kawahara.ca/how-to-display-an-ipython-notebook-in-a-wordpress-blog/'; if(window.top.location.href !== myUrl) { window.top.location.href = myUrl; } </script></code> |
The above JavaScript code is from here.
4) Convert your IPython notebook to HTML (keep all existing formatting)
File -> Download As -> HTML
5) Upload (can use https://filezilla-project.org/) this HTML file somewhere on your main site e.g.,
http://kawahara.ca/ipython/ipython_in_wordpress_blog.html
In WordPress
6) Go back to your original WordPress blog post and copy the JavaScript given here (second script) into the post (make sure to use the “raw” tags):
http://www.bitsofbits.com/2015/01/19/ipython-notebooks-in-wordpress/
7) Change the URL in the JavaScript to the full path of your IPython HTML file e.g.,
replace “URL_OF_NOTEBOOK” with “http://kawahara.ca/ipython/ipython_in_wordpress_blog.html”
And publish! You should now have your nice IPython Notebook in your WordPress blog post. Directly visiting the http://kawahara.ca/ipython/ipython_in_wordpress_blog.html will redirect you to the actual post (not the IPython notebook).