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

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"

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