RemarkJS Slideshow

This guide explains how to use RemarkJS to create a slideshow using Markdown in CoCalc.

A RemarkJS Slideshow lets you make nice browser-based slideshows using Markdown.

Step 1: HTML barebone

Create a file named remark.html with this 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="">
            var slideshow = remark.create({
                sourceUrl: ''

Step 2: Markdown

Create a file (in the same directory as remark.html) with this content:

class: center, middle

# Title


# Agenda for us!!!!

1. Introduction
2. Deep-dive
3. blah
4. Stuff!


# Introduction

Step 3: Check

Go back to the remark.html editor tab; you should show the slideshow on the right. Close the “Source code” frame of remark.html, to show only the rendered iframe.

Step 4: Write Slideshow

Switch to the file and make some changes. There are some important features beyond just markdown for making slides.

Switch back to remark.html any time to see the updated version.

Step 5: Present

For the actual presentation, click the checkbox to the left of remark.html in the main listing, then click “Download”, and click on the download link to open it in a tab of your browser. Press “P” to toggle presentation mode.