Notebook for presentation

How to generate slides from a Jupyter notebook

JupyterLab Cell tag editor

In order to export your notebooks as Reveal.js slides, follow these steps:

Open a notebook by double clicking it in the file browser.
Select Cell tools in the left sidebar.
Select the slide type (Slide, Subslide, Fragment, Skip, Notes).

Cell tag

Type of slides

Slide: New slide
Sub-Slides: New section within a topic. Cells with this marker will be placed on a new slide underneath the previous slide.
Fragments: Additional information that adds to an existing slide or sub-slide.
-: additional information that appears at the same time than the previous cell.
Notes: Speaker notes. These can be viewed on a separate browser window out of the view from the audience. (see the ‘Installation’ -> ‘Full Setup’ section of the REVEAL.js Github repo).
Skip: Cells that are set to skip do not appear in the presentation.

Generate your presentation

Exporting Notebooks

JupyterLab allows you to export your jupyter notebook files (.ipynb) into other file formats. For creating slides, we can use:

Reveal.js Slides .html

To access these options, while a notebook is open, browse the File menu:

Customize your slides

How to hide code to show cell output only?

In the cell tool, click on "Advanced Tools" to edit metadata
Paste the following in "Cell Metadata"

{
    "slideshow": {
        "slide_type": "fragment"
    },
    "tags": [
        "to_remove"
    ]
}

Advanced cell editor

Example Hide code and show outputs only

import numpy as np
import matplotlib.pyplot as plt
%matplotlib inline
# Turn interactive mode on
plt.ion()

data = np.random.randn(2, 100)
fig, ax = plt.subplots()
ax.scatter(*data, c=data[1], s=100*np.abs(data[0]));

Figure: scatterplot with random data

Generate your slides

Create a new cell and execute the command:

!jupyter nbconvert presentation.ipynb --to slides --no-prompt --TagRemovePreprocessor.remove_input_tags={\"to_remove\"}

[NbConvertApp] Converting notebook presentation.ipynb to slides
[NbConvertApp] Writing 323700 bytes to presentation.slides.html

A new file was created. Its name is the same as your jupyter notebook but its extension is html.
Double click on your file to show your presentation

Visualize in slideshow mode

Switch to standard jupyter notebook e.g. change lab to tree in the Jupyterhub address.

For instance, if you adress is

https://abisko.uiogeo-apps.sigma2.no/user/df0bb829-8d2d-487e-9748-cf1b58c1ab4b/lab

then the corresponding standard jupyter noteboo view is

https://abisko.uiogeo-apps.sigma2.no/user/df0bb829-8d2d-487e-9748-cf1b58c1ab4b/tree

Click on your html file to visualize.

Skip cells

You can hide cells, for instance to hide the generation of your slides.

In the cell tool, select "Skip"

!jupyter nbconvert presentation.ipynb --to slides --no-prompt --TagRemovePreprocessor.remove_input_tags={\"to_remove\"}

[NbConvertApp] Converting notebook presentation.ipynb to slides
[NbConvertApp] Writing 323700 bytes to presentation.slides.html

Tips and ticks

if you add images (not generated by python plotting), it is important to download these images too (for instance to the github repositoy).
In presentation mode, you can know more about the reveal-specific shortcuts just pressing the help button at the slideshow left bottom corner.
Darkish themes have css conflict with the notebook css, so it need customization to make them work (not provided by default).
Markdown Images get left aligned by default. Enclose the image like <center>![noimg](path/to/image.png)</center> to center it.

Customize the style of your slides

Change the default theme

By default simple theme is used
Try out for instance sky

!jupyter nbconvert presentation.ipynb --to slides --no-prompt --TagRemovePreprocessor.remove_input_tags={\"to_remove\"} --SlidesExporter.reveal_theme=sky

[NbConvertApp] Converting notebook presentation.ipynb to slides
[NbConvertApp] Writing 319216 bytes to presentation.slides.html

List of available theme at https://github.com/hakimel/reveal.js/tree/master/css/theme