JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.

  • ×

    Remark

    Github

    A simple, in-browser, markdown-driven slideshow tool.
    Filed under 

    • 🔾81%Overall
    • ★12,605
    • ⏳23.3 days
    • 🕩848
    • 👥26

    remark

    Build Status CDNJS xscode Donate

    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:

    1. Create an HTML file to contain your slideshow (see 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. Open help menu with h.

    See any of the boilerplate-*.html files (the -local one requires building remark first), 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:

    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

    Thanks goes to these people for their contributions:

    • Aaron Meurer
    • Adam Obeng
    • Adam Strzelecki
    • Aleksandar Trifunovic
    • Alexander Brett
    • Alex Claman
    • Alex Y. Wagner
    • Allan Jiang
    • Amin Bandali
    • Andrea Georgieva
    • Andrew Gaul
    • Andrey Ustyuzhanin
    • Antonin Stefanutti
    • Axel Rauschmayer
    • Baron Schwartz
    • Bastian Venthur
    • Bengt Lüers
    • Benjamin Stigsen
    • Bernát Kalló
    • bobappleyard
    • Brandon Keepers
    • Breno Polanski
    • Bruno Fagundez
    • bugdone
    • Cameron Daigle
    • Chris Kanich
    • Christian Dreier
    • Christopher McClellan
    • Christoph Gnip
    • cjwit
    • Claudio Bley
    • Daan van Berkel
    • Daniel Stankiewicz
    • Daniel Wang
    • Danny Tuppeny
    • Dan Steingart
    • datamike
    • Dave Henderson
    • David Richards
    • derickfay
    • Dirk Husemann
    • Erwann Mest
    • Fabian
    • Felix C. Stegerman
    • Florian Rathgeber
    • follower
    • Gerard Capes
    • gnab
    • Grégoire Pineau
    • Gurjeet Singh
    • Hadrien Frank Cardinal de Cuzey
    • Hiroshi Fukada
    • Hubert Chen
    • Hunter-Github
    • hydroid7
    • Ivo Wever
    • J_4lexander
    • Jason
    • Jason Underhill
    • Jérôme Petazzoni
    • Jimmy Merrild Krag
    • Joe Beda
    • Joel Porquet
    • Johannes Wienke
    • Julien Wajsberg
    • kellyoconor
    • kerim
    • kernc
    • Kim Joar Bekkelund
    • Lauro Caetano
    • Loreia
    • Marcel Schilling
    • Markus Schanz
    • Martin
    • Martin 'Hasan' Bramwell
    • Mathias Bynens
    • Matthew
    • Mears-UFL
    • mhor
    • Michael Byrne
    • Michael Grosser
    • Michael Mol
    • Michael Sanford
    • Mike Pennisi
    • Morton Fox
    • mrbald
    • Nicolas Hart
    • Oleksiy Syvokon
    • Ole Petter Bang
    • Ozan K
    • Pavel Boldyrev
    • Pedro
    • Pedro Martin
    • Peter Jausovec
    • petitviolet
    • Pi-Hsun Shih
    • pille1842
    • piranha
    • pospi
    • Psychos-Yi
    • punkish
    • Radovan Bast
    • Rahul Bansal
    • Rasmus Vestergaard Hansen
    • rasmusvhansen
    • Renato Alves
    • rglepe
    • Rich Trott
    • Roberto Soares
    • Robert Perce
    • Robert Szmurło
    • Robin Berjon
    • Rolf
    • Rostyk
    • Russell Keith-Magee
    • Ryan Thomson
    • Sarah Binney
    • Scott Hewitt
    • Sebastian Pipping
    • Sequoia McDowell
    • Shane Curcuru
    • Shaun Hammill
    • siba prasad samal
    • Simon Hengel
    • Stian Mathiassen
    • stu-b-doo
    • Sylvain Abélard
    • Takashi Kanemoto
    • Tej Chajed
    • Thomas Ballinger
    • Tobias Løfgren
    • Todd Brannam
    • Todd Gureckis
    • Tome Tanasovski
    • Tom Kraak
    • Torgeir Thoresen
    • tripu
    • vdepabk2t
    • William Ghelfi
    • Willi Rath
    • Wouter Sioen
    • Yihui Xie
    • Yinhe Zhang
    • Yohan Lasorsa
    • Yoshiya Hinosawa

    License

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

    Show All