How To Create Slideshow From Jupyter Notebook

After you write down your Jupyter notebook file content, if you want to show the Jupyter notebook content to others like a PPT, you can read this article. This article will tell you how to convert a Jupyter notebook file to a PPT-style presentation Html file.

1. Create Original Jupyter Notebook Source File.

1. First, start Jupyter notebook in a directory and create a Jupyter notebook file ( please refer to How To Start Jupyter Notebook In Anaconda Python Virtual Environment ). In this example, the file name is TestSlideShow.ipynb.
2. Click the TestSlideShow.ipynb file link to open and edit it. Then click the View —> Cell Toolbar —> None menu item, then you can input python source code in the Jupyter notebook file.
3. Click the menu Insert —> Insert Cell Above / Below to insert a cell line in the Jupyter notebook file.
4. Focus the cell line 1, and select the Raw NBConvert item in the cell line type drop-down list. And input <h1>How To Create SlideShow From Jupyter Notebook</h1> in the first cell line.
5. Insert a new cell line under the above cell line, and select Code in the cell line type drop-down list. And input below python code in it. Then click the Run button to generate the output under the python source code, then you can display the audio control bar in the slideshow later. Refer article How To Display Rich Output Media ( Audio, Video, Image, etc) In IPython Jupyter Notebook

   from IPython.display import Audio
   audio = Audio(filename='./test.mp3')
   display(audio)

6. Insert more cell lines after the above cell line, and input below python source code to display an online image. To show the image in the slideshow later, you should focus on the cell line and click the Run button to run the cell line source code first.

   from IPython.display import Image
   
   remote_image = Image(url='http://python.org/images/python-logo.gif')
   
   display(remote_image)

7. Insert another cell line under the above line, and input the below source code in it, when you run the source code, it will create a slide bar under the source code. Refer article How To Add Interactive Widget ( Slide Bar ) In Jupyter Notebook

   from ipywidgets import interact
   
   @interact(x=(0, 100))
   def double_number(x):
       print("The double of %d is %d." % (x, x*2))

2. Convert Jupyter Notebook File To Slideshow Html File.

After you create the above Jupyter notebook file and run the code type cell line to generate the output, then you can convert the Jupyter notebook file to a slideshow Html file follow the below steps.

1. Click View —> Cell Toolbar —> Slideshow menu item, then it will display a Slide Type drop-down list at the end of each cell line.
2. There are 5 slide types in the drop-down list. We will explain each slide type below.
3. Slide: Home page, switch by pressing the left and right arrow keys.
4. Sub-Slide: Subpage, switch by pressing the up and down arrow keys.
5. Fragment: It is hidden at the beginning, and it is displayed after pressing the space bar or arrow keys to achieve dynamic effects.
6. Skip: Cells not shown in the slide show.
7. Notes: As the speaker’s memo notes, they are not displayed on the slides.
8. You can select different slide types for each cell line to see the slide type effect. In this example, I select the Slide slide type for each cell line.
9. Click File —> Save and Checkpoint menu item to save the Jupyter notebook file.
10. Then return to the Jupyter notebook file list page. Click New —> Terminal menu item to open a new browser tab and enter the command-line console.
11. Run the below command in the opened terminal console.

    jupyter nbconvert TestSlideShow.ipynb --to slides --post serve

12. The above command will create a slideshow Html file in the Jupyter notebook file list, in this example the slideshow file name is TestSlideShow.slides.html.
13. Click the TestSlideShow.slides.html file link to open the slide show Html file, then you can see each cell line by clicking the arrow keys at the bottom right in the Html file.