5 min read

The IPython ecosystem is very powerful, integrating many functionalities, and it has become very popular. Some people use it as a full IDE environment, for example, the Rodeo, which was coded based on IPython. Some use IPython as a full platform, including coding presentations and even showing them.

IPython is able to combine codes, LaTeX, markdown, and HTML excerpts; display videos; and include graphics and interactive JavaScript objects. Here we will focus on the method of converting IPython notebooks to single HTML files, which can be displayed in any of the several modern browsers (for example, Chrome and Firefox).

IPython notebooks integrate an amazing tool called Reveal.js. Using nbconvert (which brings the possibility to export .ipynb to other formats such as markdown, latex, pdf, and also slides), the slides saved with IPython generate a Reveal.js-powered HTML slide show.

Requirements

Generally a single pip install should do the trick:

pip install ipython['all']

If you do not have the IPython notebook installed, you can also upgrade it:

pip install --upgrade ipython['all']

It is also necessary to have a copy of Reveal.js inside the same directory where you will save the converted IPython notebook, considering that you will present your slides without a running IPython session.

Using Notebooks

Start running your IPython notebook with the ipython notebook command in your console, and it will display a session of IPython in your default browser.

To start coding your presentation, in the top-right corner, you will find a cascade menu called new. Just select Notebook and it will display a new file, which can be saved with your preferred filename File > Rename….

Now, you have to select what type of content you will create. For this usage, you must select View > Cell toolbar > Slideshow or simply click on the CellToolbar button and select Slideshow.

This will display in the top-right corner of each cell a Slide Type menu, which can be chosen between:

  • Slide: Creates a new slide
  • Sub-Slide: Creates a sub-slide, which will be displayed under the main slide
  • Fragment: This will not change the slide but will insert each cell as a fragment
  • Skip: It will not be displayed
  • Notes: Yes, with Reveal.js you can write your notes and use them when presenting

The content of each cell may be changed in the upper menu, where the default is code, but you can select between Markdown content, Raw NBConvert, and Heading.

You have already started your presentation process, where you can insert codes, figures, plots, videos, and much more. You can also include math equations using LaTeX coding, by simply changing the cell type to Markdown and type, for example:

$$c = sqrt{a^2 + b^2}$$

To include images, you must code this:

from IPython.display import Image

And choose skip in the Slide Type menu. After this, you can select your disk image.

Image('my_figure.png')

Changing the Behavior and Customizing Your Presentation

By default, IPython will display your entry cell and its output, but you can also change this behavior.

Include a cell at the top of your notebook. Change the cell type to Raw NBConvert, including the following CSS code, and change Slide Type to Skip:

<style type="text/css">
.input_prompt, .input_area, .output_prompt {
    display:none !important;
}
</style>

You can customize whatever you want with CSS codes, changing the default parameters set with Reveal.js.

For example, to change the header font to Times, you just have to include the following snippet in the same first cell:

<style type="text/css">
.reveal h1, .reveal h2 {
    font-family:times
}
</style>

All of your CSS code may be included in a separate CSS file called custom.css and saved in the same directory where your HTML presentation will stand.

Generating Your Presentation

After all of your efforts in creating your presentation with Notebook, it is time to generate your HTML file. Using nbconvert, it is possible to set a lot of parameters (see ipython nbconvert –help to see them all).

ipython nbconvert presentation.ipynb --to slides

This command will generate a file called presentation.slides.html, which can be displayed with a browser.

If you want to directly run your IPython notebook, you may use this:

ipython nbconvert presentation.ipynb --to slides --post serve

An interesting note about presenting your .html file is that you can use the Reveal.js shortcuts; for example the key S will open another browser window displaying the elapsed time and a preview of the current slide, next slide, and the Notes associated with that specific slide. The key B turns your screen black, in case you want to avoid distracting people. If you press Esc or O, you will escape from full-screen to toggle overview.

Much more can be done by using Reveal.js together with IPython notebooks. For example, it is actually possible to live run code inside your presentation using the extension RISE, which simulates live IPython.

Conclusion

The usage of IPython as a slide show platform is a way to show code, results, and other formatted math text very directly. Otherwise, if you want a fancier presentation, maybe this approach will push you to further customize CSS code (it is also possible to use external themes to generate HTML files with nbconvert appending the argument—a theme that can be found on the Web).

Have a great time using IPython while coding your presentation and sharing your .ipynb files for the public with IPython Slides Viewer.

About the author

Arnaldo D’Amaral Pereira Granja Russo has a PhD in Biological Oceanography and is a researcher at the Instituto Ambiental Boto Flipper (institutobotoflipper.org).

While not teaching or programming he is surfing, climbing or paragliding. You can find him at www.ciclotux.org or on Github here.

LEAVE A REPLY

Please enter your comment!
Please enter your name here