Create an online presentations with markdown and Remark


Create a slide show presentation written purely in markdown and displayed in a standard web browser using Remark.

By using my existing Hugo website framework, I can publish slides for public consumption:

Image of markdown generated slide show


Create a folder to store presentations. For this example, I will use a directory under the Hugo framework to make the presentation publicly available:

jemurray@jasons-mbp:~/Documents/www-personal/current/ $ mkdir static/presentationdev
jemurray@jasons-mbp:~/Documents/www-personal/current/ $

In the newly created directory, add an index.html file with the Remark scripts to load the slide show content:

<!DOCTYPE html>
    <meta charset="utf-8">
      @import url(;
      @import url(,700,400italic);
      @import url(,700,400italic);
      body { font-family: 'Droid Serif'; }
      h1, h2, h3 {
        font-family: 'Yanone Kaffeesatz';
        font-weight: normal;
      .remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
  <script src=""></script>
    var slideshow = remark.create({
      highlightStyle: 'monokai',
      sourceUrl: '',
      slideNumberFormat: ''

Create the file which contains the content of the slide show presentation:

class: center, middle

# Using Markdown to Create Slides


# Agenda

1. Introduction
2. Deep-dive
3. ...


# Introduction


- foo
- bar
- baz


# Display Code Blocks

#!/usr/bin/env python3

print("Hello World!")

While creating content, I use the vscode extension Live Server to display and automatically reload the slide deck after each save. Start the web server by clicking the Go Live button:

Image of

While editing or displying private presentations, use the Live Server locally at the URL:

Image of

For public presentations, I post the content in the static directory of my existing Hugo website:

Image of markdown generated slide show

Example site: - Use the arrow keys to move between slides.