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 cloned slideshow view
- Syntax highlighting, supporting a range of languages
- Slide scaling, thus similar appearance on all devices / resolutions
- 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.
It takes only a few, simple steps to get up and running with remark:
- Create a HTML file to contain your slideshow (see below)
- Open the HTML file in a decent browser
- Edit the Markdown and/or CSS styles as needed, save and refresh!
Below is a boilerplate HTML file to get you started:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css">
<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'; }
/*
* Transitions between slides by using Animate.css
* Find interesting transition animations here!
* https://daneden.github.io/animate.css/
*/
/* Browsing forwards transition */
/* Browse to slide */
.remark-visible.remark-browsing-backwards {
animation: slideInDown 0.5s forwards;
}
/* Browse from slide */
.remark-fading.remark-browsing-backwards {
animation: slideOutDown 0.5s forwards;
}
/* Browsing backwards transition */
/* Browse to slide */
.remark-visible.remark-browsing-forwards {
animation: slideInUp 0.5s forwards;
}
/* Browse from slide */
.remark-fading.remark-browsing-forwards {
animation: slideOutUp 0.5s forwards;
}
/* disable transitions in presenter mode */
.remark-presenter-mode * {
animation: none !important;
}
</style>
</head>
<body>
<textarea id="source">
class: center, middle
# Title
---
# Agenda
1. Introduction
2. Deep-dive
3. ...
---
# Introduction
</textarea>
<script src="https://gnab.github.io/remark/downloads/remark-latest.min.js">
</script>
<script>
var slideshow = remark.create();
</script>
</body>
</html>For more information on using remark, please check out the wiki pages.
On using remark:
Other interesting stuff:
- gnab.github.com/editorjs
- judoole.github.com/GroovyBDD
- kjbekkelund.github.com/nith-coffeescript
- kjbekkelund.github.com/js-architecture-backbone
- bekkopen.github.com/infrastruktur-som-kode
- ivarconr.github.com/Test-Driven-Web-Development/slides
- havard.github.com/node.js-intro-norwegian
- mobmad.github.com/js-tdd-erfaringer
- torgeir.github.com/busterjs-lightning-talk
- roberto.github.com/ruby-sinform-2012
- http://asmeurer.github.io/python3-presentation/slides.html
- Lecture notes using remark
- Big Data in Time - Progress and Challenges from Oceanography
- http://platon.io
- http://www.markdowner.com
- http://remarks.sinaapp.com
- Remarkymark (Remark.js in Middleman)
- kjbekkelund
- DanTup
- freakboy3742
- nanoant
- gurjeet
- torgeir
- junderhill
- gureckis
- hfukada
- danielstankiewicz
- andrewgaul
- tripu
- kud
- toenuff
- obfusk
- trumbitta
- peter50216
- mhor
- roberto
- camerond
- avdv
- WouterSioen
- tchajed
- venthur
- mathiasbynens
- aminb
- sol
- presidenten
remark is licensed under the MIT license. See LICENSE for further details.