may
may

Reputation: 1185

How to set jupyter notebook to slides using reveal.js

I am trying to make slides using Jupiter notebook, so I can have code embedded on it.

I followed reveal.js to create an html slide. https://www.youtube.com/watch?v=EOpcxy0RA1A

But in the end, I do not get the arrows to switch from one slide to the other

google-chrome MySlide.slides.html 
firefox MySlide.slides.html 

I did the same, but I am not sure why I am not getting slides with arrow presentation. I am getting the whole page at once.

What I am doing wrong? How do I get the presentation with the arrows? I am using ubuntu 18.04

enter image description here

Upvotes: 4

Views: 7777

Answers (1)

jwalton
jwalton

Reputation: 5686

You are not seeing the slides as you are directly opening the html file in your browser.

Instead, convert your .ipynb file from the command line as:

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

Then to see the slides, including navigation arrows, in your browser navigate to:

http://127.0.0.1:8000/MySlides.slides.html#/

Jupyter should prompt you to navigate to this address by printing to std_out something like

Serving your slides at http://127.0.0.1:8000/MySlides.slides.html

If you want to view your slides with reveal.js regardless of whether you're serving locally or not, you can do so by pointing to an external reveal.js install:

jupyter nbconvert MySlides.ipynb --to slides --reveal-prefix  "https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.3.0"

Upvotes: 6

Related Questions