Willi Rath edited this page Oct 8, 2017 · 65 revisions

A simple, in-browser, Markdown-driven slideshow tool targeted at people who know their way around HTML and CSS.

Getting started

It takes only a few, simple steps to get up and running with remark:

  1. Create a HTML file to contain your slideshow (like boilerplate below)
  2. Open the HTML file in a decent browser
  3. Edit the Markdown and/or CSS styles as needed, save and refresh!
  4. Press C to clone a display; then press P to switch to presenter mode

Below is a boilerplate HTML container to get you started:

<!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>
    <textarea id="source">

class: center, middle

# Title

---

# Agenda

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

---

# Introduction

    </textarea>
    <script src="https://remarkjs.com/downloads/remark-latest.min.js">
    </script>
    <script>
      var slideshow = remark.create();
    </script>
  </body>
</html>

How it Works

Instantiation

Default

Calling the create function triggers the creation of a new slideshow:

var slideshow = remark.create();

When called without any arguments, the source Markdown used to create the slideshow is expected to be located inside a text area present somewhere in the DOM looking like this:

<textarea id="source">
  Markdown source
</textarea>

Custom Identifier

Alternatively, an arguments object may be passed to create. If that object contains a source field, its value will be used instead of looking for the above text area:

var slideshow = remark.create({
  source: 'Markdown source'
});

External Markdown

Depending on your preference, you might want to keep the Markdown source in a separate file. Using the sourceUrl field, an URL may be specified which will get loaded synchronously and used instead of the two former options:

var slideshow = remark.create({
  sourceUrl: 'markdown.md'
});

When working locally, with your slideshow HTML opened directly from disk, using the sourceUrl won't work out of the box. This requires hosting your files using a web server, which can be accomplished in multiple ways, e.g. by running python3 -m http.server in the directory of your index.html file. With a web server up and running, say on port 8000, you should be able to access your files via http://localhost:8000.

Offline use without an internet connection

For simple cases, you can start with the boilerplate-local.html file, and include the remark.js file in the script src element at the bottom. boilerplate-single.html includes the entire JS inline with the HTML.

For more advanced use offline:

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.