NaClhv

I do a lot of work in Jupyter Notebooks, and I often find it useful to post them in their entirety in a blog post. The following method is what I use. It requires no additional plugins or programs, and allows you to post the notebook as a non-interactive html element, as a Gutenberg block in your post.

After some trial and error with various methods, I settled on displaying the notebook in an iframe, to prevent formatting interference between the notebook and the blog post itself. I then made the iframe meld seamlessly into the rest of the page by making it responsive. Here are the step-by-step instructions.

1. Open the the Jupyter Notebook. Then from its menu bar, choose "File", "Download as", then "HTML (.html)"

2. Upload the .html file to your WordPress site, through the Media Library, using the "Add New" button.

3. Click on the uploaded file and note its URL. You can see the file itself at that URL, but we want to display it in another page or post through an iframe.

4. Start editing your post, and insert a "Custom HTML" block where you want the Jupyter Notebook to appear. Copy-paste the following:

<!--–– replace src and id. Note that the id appears in two places ––-->
<iframe src="url-to-uploaded-notebook.html" id="myIframe" scrolling="no" width="100%" frameborder="0" style="border: 1px lightgrey solid;">
</iframe>
<script>
(function(){
    var iframe = document.getElementById("myIframe");
    function resize() {
        iframe.style.height = 
        (iframe.contentWindow.document.body.scrollHeight + 4) + 'px';
        // "body" in the above line may need to be changed,
        // depending on the specific version of Jupyter.
        // For example, it may have to be replaced with 
        // .getElementById("notebook-container"), and the 
        // DOM and the id may need to be manually added.
    }
    window.addEventListener("resize", resize);
    iframe.addEventListener("load", resize);
})()
</script>

As it says in the HTML comments, replace the src with the URL of the uploaded notebook file, and rename the id (in both the HTML and the JavaScript) to something more descriptive and unique. If you want to display multiple notebooks in the same post, each id will need to be unique.

5. Preview your post and check for iframe responsiveness. The notebook should display seamlessly with the rest of the page, with no scroll bars or clipping, even when the browser window is resized. If this works, you can publish your post and you're done.

6. If the iframe doesn't respond appropriately, you need to follow the directions in the JavaScript comments. As it says, the body in document.body.scrollHeight may need to be replaced with another DOM element. Inspect the preview (right click on the page, then "inspect"), and find the main element in the notebook that most directly encompasses all the cells of the notebook. Then replace the body in the code with a reference to that element, say getElementById("notebook-container"). You may need to add this element and add the id yourself into the html file. Check that things work as expected.

That's it! The notebook will be rendered in the post where you placed the block. Two examples appears below, using the notebooks from my post on the "Bayesian evaluation for the likelihood of Christ's resurrection".