Skip to content

Home

Jump to bottom Edit New page
Bengt Lüers edited this page Jul 18, 2014 · 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
  2. Open the HTML file in a decent browser
  3. Edit the Markdown and/or CSS styles as needed, save and refresh!

Below is a boilerplate HTML container to get you started:

<!DOCTYPE html>
<html>
  <head>
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <style type="text/css">
      @import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
      @import url(http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);
      @import url(http://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="http://gnab.github.io/remark/downloads/remark-latest.min.js" type="text/javascript">
    </script>
    <script type="text/javascript">
      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, i.e. by running python -m SimpleHTTPServer or python3 -m http.server and accessing your files via http://localhost:8000.

<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