How to Convert Jupyter Notebook to Wordpress suitable HTML

Question

This week I made a Jupyter notebook that would be a great post for my blog. I already found that you can export this notebook to a simplified HTML format that can be embedded on a webpage with this command:

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

However, I would like to change some simple things. For example: every title now end with the "end of line character", and there is no clear difference between input and output.

On the NBConvert documentation page of Jupyter I can't find anything about changing templates (https://ipython.org/ipython-doc/3/notebook/nbconvert.html). They only say

"IPython provides a few templates for some output formats, and these can be specified via an additional --template argument."

Is it possible to specify your own template? And where can I find the "basic" template that I want to adjust?

Answer 1

You have to install the following plugin in wordpress : "oEmbed Gist"

Then simply have to complete these steps :

1/Paste your notebook into your gist at github (do not forget to add the .ipynb extension).

2/Simply paste the link to your gist and wordpress will do all the work properly for you

Answer 2

For those who are looking to load the HTML into Wordpress (as opposed to embedding it via Gist), you can use nb2wp tool to convert the notebook to plain HTML that doesn't require plugins, CSS, and any scripts. Images will be extracted and Latex directives converted to WP latex directives.

What the utility does are the following:

• convert .ipynb to HTML using nbconvert using selected template (full, basic, or custom)
• convert the CSS to inline style using pynliner so that the style will be honoured by Wordpress. By default it replaces the CSS given by nbconvert with custom and simpler style.css that can be inlined by pynliner.
• extract embedded images (such as ones produced by Matplotlib) and local images to img directory. You need to upload this img directory somewhere and provide URL prefix for the images.
• convert Latex directives to Wordpress.com Latex directives.

Then you need to do some manual works:

• copy-paste the HTML inside the to Wordpress HTML editor
• upload the image directory.

It's far from ideal and the result is not super good, but it's a start and an alternative I guess. (disclaimer: I'm the author)