In this article we are going to find out how to embed a ipython or jupyter notebook to WordPress. Well I could not find any specific WordPress plugin to do this entirely in one go, but has managed to find three different ways of achieving the same output using Gist. If at all someone knows a better way please reach out to me in the comment section of this post, I would appreciate it.
Approach 1 : using Gist and GistPress plugin
- Get the html version of notebook, you can do it either by converting the notebook to html using nbconvert or opening the notebook with a text editor.
- Create a gist, and paste the html code
- Now embed the gist to your WordPress post using the syntax . I use GistPress plugin, we can download GistPress plugin from https://github.com/bradyvercher/gistpress. GitPress offers a lot of other function like highlighting and selecting few line of code, I am yet to test these feature using python notebooks.
Tada, we have successfully embedded the notebook to WordPress.
Approach 2 : Use the embed script option directly from Gist
There is another simple way to achieve the same. When you create a gist, now we have an option on the top right corner to get link for embedding the gist. We can directly copy the script and paste on our WordPress post to achieve the same result.
Approach 3 : Embed Gist on your WordPress blog without a plugin
Now if you don’t want to use a plugin to achieve the same here is link : Embed Gists on your WordPress blog without a plugin, on how to add few line of code to function.php of the WordPress theme and then paste the gist link in the post. Done !! However the script to work, but was last updated in 2014.
With all these three approaches there comes a disadvantage, presence of vertical scroll for the jupyter notebook. I am not sure of the particulars, why it’s happening but pretty sure that it has to do something with the ipython notebook. If anyone has a remedy I would love to hear from you
An example post : Representing Categorical values in Machine learning