Skip to content

Home

Jump to bottom Edit New page
Michael Byrne edited this page May 21, 2019 · 68 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, a 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:

<title>Title</title> <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>
<textarea id="source">

Code:

def add(a,b)
  a + b
end
</textarea>
<script src="https://remarkjs.com/downloads/remark-latest.min.js">
</script>
<script>
  var slideshow = remark.create();
</script>
Clone this wiki locally