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 http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css">
@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://gnab.github.io/remark/downloads/remark-latest.min.js">
</script>
<script>
var slideshow = remark.create();
</script>
</body>
</html>Reveal.js-like features added in this grinner fork
-
added animations using the .animate css class
.animate.fly-in[This text will fly in] -
added pdf format toggling by using
?print-pdfin the page query string. This work around allows for all animations to be visible when printing.
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
- torgeir, for invaluable advice and feedback.
- kjbekkelund, for numerous pull requests.
- gureckis, for several pull requests.
- freakboy3742, for several pull requests.
remark is licensed under the MIT license. See LICENSE for further details.