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
Outputs
Extra HTML blocks
basic.tpl
full.tpl
<head>
</head>
Extra Latex blocks
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 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¶
print("This is a code cell that produces some output")
Inline figures¶
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)
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.
How to get example.ipynb
¶
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
.
Convert example.ipynb
using cell tags¶
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.
Write your template¶
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.
Convert example.ipynb
with formatting from custom metadata¶
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:
example
<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")
Inline figures¶
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]:
In [ ]:
<div class="input_area">