Skip to content

remarkjs slideshow

Jump to bottom
William Stein edited this page Jul 22, 2018 · 2 revisions

How to use RemarkJS to make a slideshow using Markdown in CoCalc

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

  1. Create a file named remark.html with this content:
<!DOCTYPE html>
<html>
    <head>
        <title>Title</title>
        <meta charset="utf-8">
        <style>
            @import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
            @import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);
            @import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,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'; }
        </style>
    </head>
    <body>
        <script src="https://remarkjs.com/downloads/remark-latest.min.js">
        </script>
        <script>
            var slideshow = remark.create({
                sourceUrl: 'remark.md'
            });
        </script>
    </body>
</html>
  1. Create a file remark.md (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

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

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

  3. Switch back to remark.html and see the updated version.

  4. For a presentation, click the checkbox to the left of remark.html in the main listing, then click "Download", and click on the download link. Use "P" to toggle presentation mode.

This Wiki is for CoCalc.com.

A more structured documentation is the CoCalc User Manual.

For further questions, please contact us.

Clone this wiki locally