Reputation: 4451

How to Convert Jupyter Notebook to Wordpress suitable HTML

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?

Upvotes: 14

Answers (6)

Eduardo

Reputation: 1413

Here's the source code for the basic template. Note that it's loading from the "classic" one, which you can also find there.

Now, let's see how to customize it.

Editing nbconvert's basic template

The quick dirty way is to install nbconvert in editable mode and then edit the basic template:

git clone https://github.com/jupyter/nbconvert
cd nbconvert
# install in editable mode
pip install -e .

Creating your own template

The clean one is to create a new template and then integrate it with nbconvert so you can do:

jupyter nbconvert --to html --template {your-template-name}

Here's a project that does that. It'll help you see how it's done.

non-nbconvert solution

A final solution is not to use nbconvert. First, you need to convert the notebook into markdown:

pip install jupytext
jupytext notebook.ipynb --to md

Then, you can use jupyblog to execute that markdown (it'll create a new markdown file with code snippets with the outputs). If your blog engine supports markdown files, you're done; if not, you can easily convert that markdown to HTML.

Upvotes: 0

bennylp

Reputation: 191

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)

Upvotes: 2

Andy Challis

Reputation: 21

I’ve make a notebook Wordpress plugin that will work for any URL where he notebook is hosted! I’ll add it publicly to Wordpress soon.

https://www.andrewchallis.co.uk/portfolio/php-nbconvert-a-wordpress-plugin-for-jupyter-notebooks/

It’s used the same way as the gist plugin except it is called nbconvert

[nbconvert url=“Www.example.co.uk/path/to/some/notebook.ipynb”

Upvotes: 0

navule

Reputation: 3634

You can also use nbconvert – A wordpress plugin for Jupyter notebooks. Follow this detailed blog (https://www.andrewchallis.co.uk/portfolio/php-nbconvert-a-wordpress-plugin-for-jupyter-notebooks/ ) where the author explains steps to follow, pros and cons.

Upvotes: 0