Sliding Through a Notebook
Write slides where you code
As a big fan of Jupyter Notebooks and regular writer of presentation slides, I was exited to find that there is a way to combine the two. In this article, I’ll show you the basics of how to write slides in a Jupyter Notebook and present them from a browser.
Jupyter Notebooks
A Jupyter Notebook is an open-source web application where you create documents (notebooks) that combine text, code, figures, charts, and tables. They are growing more popular as a way to share code and communicate your data science and analysis projects.
Install
The best way to run a presentation is to make sure that everything runs locally. You don’t want to depend on an internet connection to access your slides.
But you can write the slides in any notebook environment, for instance in the IBM Data Science Experience where you run notebooks in the IBM Cloud.
Configure your notebook for slides
If you do not have Jupyter Notebooks installed yet, the easiest way is to download Anaconda. While it comes with the conda package management system, Jupyter typically comes as part of the total Anaconda package, along with distributions of Python and R.
Now, open a terminal window (Mac users) and type jupyter notebook. This will start the notebook environment in your browser where you can add a new notebook by clicking the New button at the top. The final thing to do is to activate the Slideshow option as in the figure below. Now you are ready to write slides in a notebook!
Format slides
I have created a short example notebook that shows some of the options to create slides. View the raw code, save it, and open it from the notebook environment in your browser to see what it looks like.
The cells of the notebook will be converted into slides. There are a few Slide Type options:
- Slide — move through slides from left to right
- Sub-Slide — add a slide below the previous one
- Fragment — add a fragment to the previous slide
- Skip — do not create a slide from a cell
- Notes — also no slide is created here
You can write slides using Markdown (do not forget to select this option from the top of the notebook) or code fragments.
Markdown cells obviously use Markdown as in the below example, but you can also add some styling with CSS and HTML to change the color, size, and font. Remember to run your cell using the play icon in the menu to see the rendered output.
Code fragment cells will both display the Python code and the output of the cell as either printed text, a table, or figure as in the below example.
Present in the browser
So far, we’ve covered the basics of how to build slides in a notebook. To now display them as a slide deck in the browser, you need the below command that will convert the notebook into an interactive slide show.
jupyter nbconvert slides-in-a-notebook.ipynb --to slides --post serveThe command creates a Reveal.js HTML slideshow from your slideshow-formatted notebook cells, and serves them from a local web server. If you’re new to Reveal.js, it has some added benefits such as responsive design and shortcuts to darken the presentation (.) and zoom out to a thumbnail view of your slides (esc).
Clearing the deck
Nothing against PowerPoint, but it was designed for words and pictures—not for presenting code. The syntax highlighting alone would have been enough to convince me to present blocks of Python from Jupyter-Notebook-generated slideshows. But the fact that I can generate a Reveal.js deck without handling boilerplate code is an extra bonus.
It’s also a great way to share your code with others. As long as they have Anaconda, they can easily test and play with your code right in your notebook. That’s why I now format my presentations in Jupyter Notebooks whenever I can. Leave a comment here if you plan on doing so too!
