by Dat Tran

How you can ditch PowerPoint and build better slides with Jupyter and Reveal.js

1*MvyDoOEprAO-lbSuInyA0w
Image Credit: Rafael Araujo on Pinterest

In this article, I will introduce jupyter2slides — a little side project of mine that lets you easily create beautiful and interactive presentation slides using Jupyter Notebook and reveal.js.

Here’s what it looks like:

1*8Hmu8ZyI3NJJWvVEWZlWAg
http://interactive-slides.cfapps.io/

And this is the corresponding PDF, generated with DeckTape:

My motivation for building this

Microsoft PowerPoint is cool. It’s like a Swiss Army knife for consultants, and you can make beautiful slides with it.

When it comes to code, though, PowerPoint sucks. The solution is to use reveal.js. You can use markdown to highlight code, and it’s responsive. But like LaTeX, it can be tedious.

Another way to use reveal.js is through Jupyter which offers many advantages:

  • In-browser editing for code with automatic syntax highlighting, indentation, and tab completion
  • Ability to run code with the results of computations attached to the code which generated them (literate programming)
  • Supports Markdown and many media formats such as HTML, LaTex, audio, and images
  • Supports interactive widgets to manipulate and visualize data
  • Uses tools from the PyData stack like Matplotlib, Numpy, and Bokeh as well as others like Plotly and Folium

To use reveal.js with Jupyter, you create a notebook and use nbconvert to get reveal.js slides as well. But the standard design is boring:

1*kq3-BczjCXej2BMu-u4Qyw
Check out IPython Slides Viewer for some other “default” examples.

My solution

I’ve worked on a project that lets you generate beautiful presentation slides. The entire code is on my GitHub repo. Under the hood, it still uses nbconvertwith reveal.js, but I extended it by:

  • Adding a customized theme which has a cleaner design
  • Enabling the title footer plugin by default
  • Enabling slide numbers by default
  • Adding a Jupyter notebook template with examples like cover and divider slides, markdown syntax, and more
  • Making it easier to push the presentation to Cloud Foundry by using Flask and the Python buildpack
  • Including the option to export slides to PDF using DeckTape

How to get started

To create your own presentation, clone the repo on GitHub and go through its readme.

1*WEgwvN_yuy0-gsgAAmIKIw
Clone the repo to get started.

I hope this project will be of use for you in the future. I look forward to seeing others use this template at conferences like PyData. I welcome any feedback to improve the slide designs and others’ contributes to the code base.

If you found this article useful, give me a high five ?? so others can find it too, and share it with your friends. Follow me here on Medium (Dat Tran) or on Twitter (@datitran) to stay up-to-date with my work. Thanks for reading!