How To Embed HTML from Jupyter Notebook in WordPress

If you write a blog, you may want to embed the HTML from a Jupyter Notebook in WordPress. This is what I often do, so today I’ll show you how to do it painlessly in a couple of steps.

As an example I’ll be using one of my posts in the Pandas series. So, without further ado, here are the steps:

Step 1 – Open the notebook

Here it is:

Step 2 – Download the Notebook

Go to the File menu and download the file as Notebook, with the extension .ipynb. Make sure there are no spaces in the name of the file.

Step 3 – Open the Terminal

Now move your notebook to a folder of your choice. Then open the terminal and navigate to that folder:

Step 4 – Convert to HTML

Now, in the terminal, type the following command:

 jupyter nbconvert --to html --template basic file_name_without_spaces.ipynb

and hit Enter. Naturally you should use the actual name of your file:

Step 5 – Copy the HTML code

Open the html file that has just been created in a word editor of your choice. I use Notepad. Select all and copy.

Step 6 – Add a CustomHTML Block in Worpress and Paste the HTML Code

Now you can use the code in WordPress. In your post add a CustomHTML block and copy the HTML code. You can also use the preview to see what it looks like.