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:

Learn how to make beautiful GUI apps

in Python using the Kivy framework.

Comprehensive, for Kivy beginners, easy to follow.

Get the book here (PDF) or on Amazon:

ebook / paperback (black and white) / paperback (full color)

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:

Your Panda3D Magazine

Make Awesome Games and Other 3D Apps

with Panda3D and Blender using Python.

Cool stuff, easy to follow articles.

Get the magazine here (PDF).

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.

Python Jumpstart Course

Learn the basics of Python, including OOP.

with lots of exercises, easy to follow

The course is available on Udemy.

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.

Blender Jumpstart Course

Learn the basics of 3D modeling in Blender.

step-by-step, easy to follow, visually rich

The course is available on Udemy and on Skillshare.