Customizing nbconvert¶

Under the hood, nbconvert uses Jinja templates to specify how the notebooks should be formatted. These templates can be fully customized, allowing you to use nbconvert to create notebooks in different formats with different styles as well.

Converting a notebook to an (I)Python script and printing to stdout¶

Out of the box, nbconvert can be used to convert notebooks to plain Python files. For example, the following command converts the example.ipynb notebook to Python and prints out the result:

In [1]:

!jupyter nbconvert --to python 'example.ipynb' --stdout

[NbConvertApp] Converting notebook example.ipynb to python

# coding: utf-8

# # Example notebook

# ### Markdown cells
#
# This is an example notebook that can be converted with `nbconvert` to different formats. This is an example of a markdown cell.

# ### LaTeX Equations
#
# Here is an equation:
#
# $$
# y = \sin(x)
# $$

# ### Code cells

# In[1]:


print("This is a code cell that produces some output")


# ### Inline figures

# In[1]:


import matplotlib.pyplot as plt
import numpy as np
plt.ion()

x = np.linspace(0, 2 * np.pi, 100)
y = np.sin(x)
plt.plot(x, y)

From the code, you can see that non-code cells are also exported. If you wanted to change that behaviour, you would first look to nbconvert configuration options page to see if there is an option available that can give you your desired behaviour.

In this case, if you wanted to remove code cells from the output, you could use the TemplateExporter.exclude_markdown traitlet directly, as below.

In [2]:

!jupyter nbconvert --to python 'example.ipynb' --stdout --TemplateExporter.exclude_markdown=True

[NbConvertApp] Converting notebook example.ipynb to python

# coding: utf-8

# In[1]:


print("This is a code cell that produces some output")


# In[1]:


import matplotlib.pyplot as plt
import numpy as np
plt.ion()

x = np.linspace(0, 2 * np.pi, 100)
y = np.sin(x)
plt.plot(x, y)

Custom Templates¶

As mentioned above, if you want to change this behavior, you can use a custom template. The custom template inherits from the Python template and overwrites the markdown blocks so that they are empty.

Below is an example of a custom template, which we write to a file called simplepython.tpl. This template removes markdown cells from the output, and also changes how the execution count numbers are formatted:

In [3]:

%%writefile simplepython.tpl

{% extends 'python.tpl'%}

## remove markdown cells
{% block markdowncell -%}
{% endblock markdowncell %}

## change the appearance of execution count
{% block in_prompt %}
# [{{ cell.execution_count if cell.execution_count else ' ' }}]:
{% endblock in_prompt %}

Overwriting simplepython.tpl

Using this template, we see that the resulting Python code does not contain anything that was previously in a markdown cell, and only displays execution counts (i.e., [#]: not In[#]:):

In [4]:

!jupyter nbconvert --to python 'example.ipynb' --stdout --template=simplepython.tpl

[NbConvertApp] Converting notebook example.ipynb to python


# coding: utf-8

# [1]:

print("This is a code cell that produces some output")


# [1]:

import matplotlib.pyplot as plt
import numpy as np
plt.ion()

x = np.linspace(0, 2 * np.pi, 100)
y = np.sin(x)
plt.plot(x, y)

Template structure¶

Nbconvert templates consist of a set of nested blocks. When defining a new template, you extend an existing template by overriding some of the blocks.

All the templates shipped in nbconvert have the basic structure described here, though some may define additional blocks.

In [5]:

from IPython.display import HTML, display
with open('template_structure.html') as f:
    display(HTML(f.read()))

Main page

header

body

any_cell

codecell

input_group

in_prompt

input

output_group

output_prompt

outputs (see below)

any_cell

markdowncell

any_cell

rawcell

any_cell

unknowncell

⋮

footer

Outputs

outputs

output

execute_result

output

stream_stdout

output

stream_stderr

output

display_data

data_priority

data_pdf / data_svg / data_png / data_html / data_markdown / data_jpg / data_text / data_latex / data_javascript / data_other

output

error

traceback_line

⋮

Extra HTML blocks

basic.tpl

output

output_area_prompt

output (as above)

full.tpl

header

<head>

html_head

</head>

Extra Latex blocks

header

docclass

packages

definitions

title

date

author

commands

margins

body

predoc

maketitle

abstract

... other fields as above ...

postdoc

bibliography

A few gotchas¶

Jinja blocks use {% %} by default which does not play nicely with LaTeX, so those are replaced by ((* *)) in LaTeX templates.

Templates using cell tags¶

The notebook file format supports attaching arbitrary JSON metadata to each cell. In addition, every cell has a special tags metadata field that accepts a list of strings that indicate the cell’s tags. To apply these, go to the View → CellToolbar → Tags option which will create a Tag editor at the top of every cell.

First choose a notebook you want to convert to html, and apply the tags: "Easy", "Medium", or "Hard".

With this in place, the notebook can be converted using a custom template.

Design your template in the cells provided below.

Hint: tags are located at cell.metadata.tags, the following Python code collects the value of the tag:

cell['metadata'].get('tags', [])

Which you can then use inside a Jinja template as in the following:

In [6]:

%%writefile mytemplate.tpl

{% extends 'full.tpl'%}
{% block any_cell %}
{% if 'Hard' in cell['metadata'].get('tags', []) %}
    <div style="border:thin solid red">
        {{ super() }}
    </div>
{% elif 'Medium' in cell['metadata'].get('tags', []) %}
    <div style="border:thin solid orange">
        {{ super() }}
    </div>
{% elif 'Easy' in cell['metadata'].get('tags', []) %}
    <div style="border:thin solid green">
        {{ super() }}
    </div>
{% else %}
    {{ super() }}
{% endif %}
{% endblock any_cell %}

Overwriting mytemplate.tpl

Now, if we collect the result of using nbconvert with this template, and display the resulting html, we see the following:

In [7]:

example = !jupyter nbconvert --to html 'example.ipynb' --template=mytemplate.tpl --stdout
example = example[3:] # have to remove the first three lines which are not proper html
from IPython.display import HTML, display
display(HTML('\n'.join(example)))

example

Example notebook¶

Markdown cells¶

This is an example notebook that can be converted with nbconvert to different formats. This is an example of a markdown cell.

LaTeX Equations¶

Here is an equation:

$$ y = \sin(x) $$

Code cells¶

In [1]:

print("This is a code cell that produces some output")

This is a code cell that produces some output

Inline figures¶

In [1]:

import matplotlib.pyplot as plt
import numpy as np
plt.ion()

x = np.linspace(0, 2 * np.pi, 100)
y = np.sin(x)
plt.plot(x, y)

Out[1]:

[<matplotlib.lines.Line2D at 0x1111b2160>]

Templates using custom cell metadata¶

We demonstrated above how to use cell tags in a template to apply custom styling to a notebook. But remember, the notebook file format supports attaching arbitrary JSON metadata to each cell, not only cell tags. Here, we describe an exercise for using an example.difficulty metadata field (rather than cell tags) to do the same as before (to mark up different cells as being “Easy”, “Medium” or “Hard”).

How to edit cell metadata¶

To edit the cell metadata from within the notebook, go to the menu item: View → Cell Toolbar → Edit Metadata. This will bring up a toolbar above each cell with a button that says “Edit Metadata”. Click this button, and a field will pop up in which you will directly edit the cell metadata JSON.

NB: Because it is JSON, you will need to ensure that what you write is valid JSON.

Template challenges: dealing with missing custom metadata fields¶

One of the challenges of dealing with custom metadata is to handle the case where the metadata is not present on every cell. This can get somewhat tricky because of JSON objects tendency to be deeply nested coupled with Python’s (and therefore Jinja’s) approach to calling into dictionaries. Specifically, the following code will error:

foo = {}
foo["bar"]

Accordingly, it is better to use the `{}.get method <https://docs.python.org/3.6/library/stdtypes.html#dict.get>`__ which allows you to set a default value to return if no key is found as the second argument.

Hint: if your metadata items are located at cell.metadata.example.difficulty, the following Python code would get the value defaulting to an empty string ('') if nothing is found:

cell['metadata'].get('example', {}).get('difficulty', '')

Exercise: Write a template for handling custom metadata¶

Now, write a template that will look for Easy, Medium and Hard metadata values for the cell.metadata.example.difficulty field and wrap them in a div with a green, orange, or red thin solid border (respectively).

NB: This is the same design and logic as used in the previous cell tag example.

We have provided an example file in example.ipynb in the nbconvert documentation that has already been marked up with both tags and the above metadata for you to test with. You can get it from this link to the raw file or by cloning the repository from GitHub and navingating to nbconvert/docs/source/example.ipynb.

First, make sure that you can reproduce the previous result using the cell tags template that we have provided above.

Easy: If you want to make it easy on yourself, create a new file my_template.tpl in the same directory as example.ipynb and copy the contents of the cell we use to write mytemplate.tpl to the file system.

Then run jupyter nbconvert --to html 'example.ipynb' --template=mytemplate.tpl and see if your

Moderate: If you want more of a challenge, try recreating the jinja template by modifying the following jinja template file:

{% extends 'full.tpl'%}
{% block any_cell %}
    <div style="border:thin solid red">
        {{ super() }}
    </div>
{% endblock any_cell %}

Hard: If you want even more of a challenge, try recreating the jinja template from scratch.

Once you’ve done at least the Easy version of the previous step, try modifying your template to use cell.metadata.example.difficulty fields rather than cell tags.

Once you’ve written your template, try converting example.ipynb using the following command (making sure that your_template.tpl is in your local directory where you are running the command):

jupyter nbconvert --to html 'example.ipynb' --template=your_template.tpl --stdout

The resulting display should pick out different cells to be bordered with green, orange, or red.

If you do that successfullly, the resulting html document should look like the following cell’s contents:

<p>example</p>

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_HTML"></script>
<!-- MathJax configuration -->
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
    tex2jax: {
        inlineMath: [ ['$','$'], ["\\(","\\)"] ],
        displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
        processEscapes: true,
        processEnvironments: true
    },
    // Center justify equations in code and markdown cells. Elsewhere
    // we use CSS to left justify single line equations in code cells.
    displayAlign: 'center',
    "HTML-CSS": {
        styles: {'.MathJax_Display': {"margin": 0}},
        linebreaks: { automatic: true }
    }
});
</script>
<!-- End of mathjax configuration --></head>

<div class="container" id="notebook-container">

<div style="border:thin solid red">

Example notebook¶

</div>

Markdown cells¶

This is an example notebook that can be converted with nbconvert to different formats. This is an example of a markdown cell.

LaTeX Equations¶

Here is an equation:

<div style="border:thin solid green">

Code cells¶

</div>

In [1]:

<div class="input_area">

print("This is a code cell that produces some output")

This is a code cell that produces some output

Inline figures¶

<div style="border:thin solid orange">

In [1]:

<div class="input_area">

import matplotlib.pyplot as plt
import numpy as np
plt.ion()

x = np.linspace(0, 2 * np.pi, 100)
y = np.sin(x)
plt.plot(x, y)

Out[1]:

[<matplotlib.lines.Line2D at 0x1111b2160>]

</div>

In [ ]:

<div class="input_area">

</div>