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 (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
License
remark is licensed under the MIT license. See LICENSE for further
details.