slides

How to make HTML slides from ipynb, md, and rmd

Project maintained by marskar Hosted on GitHub Pages — Theme by mattgraham

Host your HTML slides on GitHub pages

The goal of this tutorial is to demonstrate how to make HTML slidedecks that can be put on the web.

Instructions for how to turn Markdown (.md), R Markdown (.Rmd), and Jupyter Notebook (.ipynb) files into slides are detailed below.

One major advantage of HTML slidedecks is that you can host them on GitHub for free and share a url, instead of resorting to email or transferring files using USB drives.

Instead of using Powerpoint, Keynote, or Google Slides, I recommend you try to generate slides programmatically using the steps below.

Speaking of Powerpoint, I suggest that you avoid the horrors of Microsoft Office entirely.

Instead of using Microsoft Word & Powerpoint and the doc(x) & ppt(x) formats, write documents and slideshows in Markdown format and then converted into the desired output format using one of the three options below:
1. Pandoc or Pypandoc (recommended for users of the Python programming language and those comfortable using the command line)
2. RStudio or the rmarkdown R package (recommended for users of the R programming language)
3. JupyterLab (or the classic Jupyter Notebook)
Instead of using Microsoft Excel and the xls(x) format, save tabular data as comma-separated value (csv) files. PyCharm, RStudio and JupyterLab all have csv viewers. These csv viewers are better options for looking at data than Excel, because they do not have the ability to edit or auto-format your raw data. Tables that are meant to be displayed in documents can also be written in Markdown format instead of in Excel.

Create HTML slides from markdown (md) using Pandoc or Pypandoc

The easiest way to create a slideshow is to write a simple markdown file, like habits.md, and use Pandoc to convert it to one of the possible HTML formats.

There are many ways to install Pandoc, but I recommend to use Anaconda or Miniconda. The Anaconda installer is hundreds of MB in size because the Anaconda Python distribution includes hundreds of Python packages plus the Anaconda Navigator program. The Miniconda installer is more than ten times smaller and includes only Python and conda.

Once you have Anaconda or Miniconda installed, you can install Pandoc using this command-line command conda install -yc conda-forge pandoc and then run the one of the options below:

pandoc -t dzslides habits.md -o pandoc/dzslides-pandoc.html --self-contained
pandoc -t slidy habits.md -o pandoc/slidy-pandoc.html --self-contained
pandoc -t revealjs habits.md -o pandoc/revealjs-pandoc.html -sV revealjs-url=https://revealjs.com

Instead of using Pandoc in the terminal as described above, you can also install Pypandoc and convert Markdown to almost any format in your Python environment (e.g. in PyCharm)!

Pro-tip 1: You can write Markdown in PyCharm! Press Ctrl/Cmd+N, then Enter, type out the name of the Markdown file (must end in .md) you want to create, and press Enter again. You get Markdown syntax highlighting and a live preview of your rendered Markdown!
Pro-tip 2: If you create a new Python scratch file in PyCharm (Press Ctrl/Cmd+Shift+N, then Enter) and change the extension from .py to .md, PyCharm will continue to treat the file like a Python script giving you the ability to run code in your Markdown document! As soon as you take the file out of the Scratches folder, PyCharm will treat it like a Markdown file again! In short, PyCharm will auto-detect the file type based on its extension, but this does not apply to scratch files!
Pro-tip 3: To get automatic python syntax highlighting in your Markdown documents on GitHub and in slideshows created from Markdown files, put three backticks (`) followed by the word “python” above your code and then a new line below your code put another three backticks (`). This is called a code block in Markdown.

Examples of HTML slides created using Pandoc or Pypandoc:

Knit slides from md or Rmd to HTML in RStudio or from the command-line

First, you will need to install R. Again, I recommend installing Anaconda or Miniconda and then running conda install -yc r r-essentials.

Then, write you can run one of the commands below to make the html slideshow.

Rscript -e "rmarkdown::render('habits.md', 'ioslides_presentation', 'r/ioslides-r.html')"
Rscript -e "rmarkdown::render('habits.md', 'slidy_presentation', 'r/slidy-r.html')"

You can also install RStudio by running conda install -yc r rstudio, open up a markdown file in RStudio, add a YAML header that specifies the output_format as in habits.Rmd, save the file and then click Preview/Knit or Press Ctrl/Cmd + Shift + K.

For revealjs and xaringan slides, you must first run install.packages('revealjs') and install.packages('xaringan') in RStudio before you can Knit (Ctrl/Cmd + Shift + K).

You only need to install the packages once!

You can also run install the packages and render slides from the command-line as below:

Rscript -e "install.packages('revealjs', repos='http://cran.us.r-project.org')"
Rscript -e "install.packages('xaringan', repos='http://cran.us.r-project.org')"

Rscript -e "rmarkdown::render('revealjs.Rmd', output_file = 'r/revealjs-r.html')"
Rscript -e "rmarkdown::render('xaringan.Rmd', output_file = 'r/xaringan.html')"

Examples of HTML slides created using RStudio or the rmarkdown R package:

Create HTML slides from ipynb using nbconvert from the command-line

You can also create slides from a Jupyter Notebook using jupyter nbconvert.

If you have Anaconda installed, you should already be able to run jupyter nbconvert, but if you are using Miniconda you will need to install nbconvert by running conda install -yc conda-forge jupyter nbconvert.

url="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.5.0"
jupyter nbconvert revealjs.ipynb --to slides --reveal-prefix=$url

jupyter nbconvert revealjs.ipynb --to slides --reveal-prefix="https://revealjs.com"

Another way to create slides is to open the Jupyter Notebook in JupyterLab and follow the instructions in this example slide deck:

An example with instructions for creating slides using JupyterLab:

revealjs

Both of the methods above should give the same result: a revealjs html slideshow file.

There are other ways to make slides from a Jupyter Notebook that do not involve making an html file.

The easiest way is to use nbviewer, so that you can switch between notebook and slide view.
Another approach is to use Binder and the RISE extension for interactive notebook slideshows as in these two examples:
- by RISE creator Damian Avila
- by Matthias Geier.

These two options are not the same as creating an html slideshow from a jupyter notebook and hosting it on your website, but they get the job done.