Converting Ipython Notebook to Slides

Once the presentation is written in ipython notebook, the presentation has to be converted to slides using the following code:

ipython nbconvert yournotebook.ipynb --to slides

This converts your slides to an html file. This line of code should convert you notebook to ‘yournotebook.slides.html’ Since the ipython notebook does not have the newest version of reveal.js, this page tries to replace the old version of reveal.js with the new version.

Creating and Saving Fixed Version of Reveal.js

The following code should be saved in a file with a name

“” in the same directory as the directory with your slides.

The Fixed Code


if [ $# != 2 ]; then
    echo "Usage: [input html] [output html]";
sed 's:reveal.js/://' $1 > $2

Running the Code

In the terminal, type

chmod +x

This makes .sh file executable. Next, run the following command:

./ [yournotebook.slides.html ] [newfile.html]

This makes a new file that makes your presenation into a functioning portable slides that have the correct reveal.js. The output of the this command should give you a code similar to the following:

Serving HTTP on port 8000 ...

It means that your presentation is served on localhost:8000.

Serving the Slides

Now open a web browser and type localhost:8000. This should open the folder that has your presentation on internet. To open your fixed slides, in this example, click on the newfile.html. This should open your presentation as a web presenation.

Adding an Image to Ipython Notebook

To add an image from internet into your presentation write the following code, where the url of the image is given in after the word src=”…”:

<div class="naked-img">
    <img src="" width="400">
    $("naked-img").css("margin-left", "15%");

Once you figure out the url of the image, you can type the above code with correct url into a new cell in ipython notebook. Width sets your default ratio of the width to be 400 pixels, you can also add height size. If you want to import images from your computer, save the image you want to import with ‘.png’ extension on directory where your notebook is saved. Then, write the following code in a cell where you want the image to be saved:

<div class="naked-img">
    <img src="barbie.png" width="400">
    $("naked-img").css("margin-left", "15%");

Replace “barbie.png” with your image that has extension ‘.png’. This code is supposed to show the image only without the code when you present your slides.