Embedding Jupyter and Pluto notebooks in a blog post is easy.

Embedding Jupyter and Pluto notebooks in a blog post when writing a programming tutorial can be very useful and convenient. It has the advantage of preserving the syntax highlighting, easily include any plots/gifs that are part of the project you’ve been working on. And, hopefully, in the future, there will be a way to make those notebooks interactive, so the reader can play with it right there when reading the post.

After some search, here is the simple solution I came up with.

1. Save your Jupyter or Pluto notebook as an .html file.

Saving your notebook as a .html file.
Saving Pluto notebook as a static .htmlfile

2. Go to your cPanel page for your website, specifically to the File Manager.

I am using Bluehost as my blog’s hosting provider. This is how I access my cPanel.

https://my.bluehost.com/hosting/app#/

Click on the Advanced tab:

Go to the Advanced tab.

Choose File Manager:

File Manager has the content of your blog/website.

If you are using another hosting provider, this step might look slightly different, depending on how you access your website’s files.

3. Go to the public_html folder and create a folder inside it:

jupyter_notebooks, for example.

4. Upload your Jupyter notebook .HTML file into this newly created folder.

Now you need to make a note of the URL pointing to this file. It will be something like this:

https://yourdomainname.com/jupyter_notebooks/jupyterfile.html

5. Install the iframe or the Advanced iFrame plugin.

Go back to your WordPress Dashboard and install the iframe plugin, which will help us to embed the Jupyter HTML notebook into the blog post.

6. Embed Jupyter notebook and make sure it looks nice when published.

Now you are ready to create a blog post containing your Jupyter or Pluto notebook. Paste the link using this plugin into your blog post (or a blog page if this is what you want), as follows:

[iframe src="https://juliaifrank.com/jupyter_notebooks/arrowMarkers.html"]

An example:

If you are using the Advanced iFrame plugin to embed, in your post editor (Gutenberg blocks or Elementor), you add an Advanced iFrame block. I do so by typing a /.

Then you type in your .html file location URL and VERY IMPORTANT adjust the block height on desktop view and mobile view to the proper height so that when published, your notebook will show full length instead of just an excerpt and a scroll bar. I did not do it at first, and people had trouble reading the post. I adjusted the height until the full notebook was visible without the scroll bar appearing on the right.

Advanced iFrame has technically a setting, which allows the plugin to choose the proper height automatically. However, it did not work for me, so I had to do it manually.

7. Check the result.

After this, your blog post/web page should display the notebook when you preview or publish it.

It is not interactive. However, it provides a nice visual and the ability to copy-paste code snippets for the reader.

This is a nice way to share your Jupyter or Pluto notebooks as a blog post, which might be useful for others. Since the Jupyter Notebooks allow you to have quite a well-formatted markdown cell, you can create your whole blog post in Jupyter and upload it to your website in the way described above. The same is true for Pluto.jl.

Here is an example of such a blog post with an embedded Pluto notebook.

I hope this was helpful!

Leave a Comment

Your email address will not be published. Required fields are marked *

Leave a Comment Cancel Reply

Your email address will not be published. Required fields are marked *