@oncomouse/remark-slide

v0.14.1

Published

4 years ago

[![Build Status](https://travis-ci.org/gnab/remark.svg?branch=develop)](https://travis-ci.org/gnab/remark) [![CDNJS](https://img.shields.io/cdnjs/v/remark.svg)](https://cdnjs.com/libraries/remark) [![Donate](https://www.paypalobjects.com/en_US/i/btn/btn_d

0High
0Medium
0Low

oncomouse

remark

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

Markdown formatting, with smart extensions
Presenter mode with markdown formatted speaker notes and cloned slideshow view
Syntax highlighting, supporting a range of languages
Slide scaling, thus similar appearance on all devices / resolutions
Simple markdown templates for customized slides
Touch support for smart phones and pads, i.e. swipe to navigate slides

Check out this remark slideshow for a brief introduction.

To render your Markdown-based slideshow on the fly, checkout Remarkise.

Getting Started

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

Create an HTML file to contain your slideshow (see boilerplate below)
Open the HTML file in a decent browser
Edit the Markdown and/or CSS styles as needed, save and refresh!
Press C to clone a display; then press P to switch to presenter mode. Open help menu with h.

See any of the boilerplate-*.html files, or just copy the boilerplate HTML below to start:

<!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 To Use remark

The wiki pages contain all the how-to, templating, and API help.

Real-world remark slideshows

On using remark:

Other interesting stuff:

Other systems integrating with remark

http://platon.io
Remarkymark (Remark.js in Middleman)
Remark Boilerplate
Repositorium
Backslide - CLI for automating creation, export and PDF conversion of Remark presentations
Remarker - CLI for serving and building Remark slideshow from markdown file
Cicero - Serves presentation slides written in markdown using remark or reveal.js, directly from GitHub or GitLab

Printing

Converting to PDF is primarily supported via Chrome's Print to PDF feature. Note that the styling is not exact; See #50 for some recommended CSS to add to your styles.

Alternatively, you can use DeckTape, a PDF exporter for HTML presentation frameworks that provides support for remark.

Contributors

License

remark is licensed under the MIT license. See LICENSE for further details.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme