This is based on data-markdown from Paul Irish modified to use marked to support Github Flavoured Markdown. Sensitive to indentation (avoid mixing tabs and spaces) and line breaks (avoid consecutive breaks).

tion data-markdown>
<script type="text/template">
    ## Page title

    A paragraph with some text and a [link](http://hakim.se).
</script>
ction>

You can write your content as a separate file and have reveal.js load it at runtime. Note the separator arguments which determine how slides are delimited in the external file.

tion data-markdown="example.md" data-separator="^\n\n\n" data-vertical="^\n\n"></section>

Configuration

At the end of your page you need to initialize reveal by running the following code. Note that all config values are optional and will default as specified below.

al.initialize({

// Display controls in the bottom right corner
controls: true,

// Display a presentation progress bar
progress: true,

// Push each slide change to the browser history
history: false,

// Enable keyboard shortcuts for navigation
keyboard: true,

// Enable touch events for navigation
touch: true,

// Enable the slide overview mode
overview: true,

// Vertical centering of slides
center: true,

// Loop the presentation
loop: false,

// Change the presentation direction to be RTL
rtl: false,

// Number of milliseconds between automatically proceeding to the
// next slide, disabled when set to 0, this value can be overwritten
// by using a data-autoslide attribute on your slides
autoSlide: 0,

// Enable slide navigation via mouse wheel
mouseWheel: false,

// Apply a 3D roll to links on hover
rollingLinks: true,

// Transition style
transition: 'default', // default/cube/page/concave/zoom/linear/fade/none

// Transition speed
transitionSpeed: 'default', // default/fast/slow

// Transition style for full page backgrounds
backgroundTransition: 'default' // default/linear

Note that the new default vertical centering option will break compatibility with slides that were using transitions with backgrounds (cube and page). To restore the previous behavior, set center to false.

The configuration can be updated after initialization using the `configure` method:

urn autoSlide off
al.configure({ autoSlide: 0 });

tart auto-sliding every 5s
al.configure({ autoSlide: 5000 });

Dependencies

Reveal.js doesn't rely on any third party scripts to work but a few optional libraries are included by default. These libraries are loaded as dependencies in the order they appear, for example:

al.initialize({
dependencies: [
    // Cross-browser shim that fully implements classList - https://github.com/eligrey/classList.js/
    { src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },

    // Interpret Markdown in <section> elements
    { src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
    { src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },

    // Syntax highlight for <code> elements
    { src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },

    // Zoom in and out with Alt+click
    { src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },

    // Speaker notes
    { src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } },

    // Remote control your reveal.js presentation using a touch device
    { src: 'plugin/remotes/remotes.js', async: true, condition: function() { return !!document.body.classList; } }
]

You can add your own extensions using the same syntax. The following properties are available for each dependency object:

• src: Path to the script to load
• async: [optional] Flags if the script should load after reveal.js has started, defaults to false
• callback: [optional] Function to execute when the script has loaded
• condition: [optional] Function which must return true for the script to be loaded

Presentation Size

All presentations have a normal size, that is the resolution at which they are authored. The framework will automatically scale presentations uniformly based on this size to ensure that everything fits on any given display or viewport.

See below for a list of configuration options related to sizing, including default values:

al.initialize({

...

// The "normal" size of the presentation, aspect ratio will be preserved
// when the presentation is scaled to fit different resolutions. Can be
// specified using percentage units.
width: 960,
height: 700,

// Factor of the display size that should remain empty around the content
margin: 0.1,

// Bounds for smallest/largest possible scale to apply to content
minScale: 0.2,
maxScale: 1.0

Keyboard Bindings

If you're unhappy with any of the default keyboard bindings you can override them using the `keyboard` config option:

al.configure({
yboard: {
13: 'next', // go to the next slide when the ENTER key is pressed
27: function() {}, // do something custom when ESC is pressed
32: null // don't do anything when SPACE is pressed (i.e. disable a reveal.js default binding)

API

The Reveal class provides a JavaScript API for controlling navigation and reading state:

avigation
al.slide( indexh, indexv, indexf );
al.left();
al.right();
al.up();
al.down();
al.prev();
al.next();
al.prevFragment();
al.nextFragment();
al.toggleOverview();
al.togglePause();

etrieves the previous and current slide elements
al.getPreviousSlide();
al.getCurrentSlide();

al.getIndices(); // { h: 0, v: 0 } }

tate checks
al.isFirstSlide();
al.isLastSlide();
al.isOverview();
al.isPaused();

Ready Event

The 'ready' event is fired when reveal.js has loaded all (synchronous) dependencies and is ready to start navigating.

al.addEventListener( 'ready', function( event ) {
// event.currentSlide, event.indexh, event.indexv

Slide Changed Event

An 'slidechanged' event is fired each time the slide is changed (regardless of state). The event object holds the index values of the current slide as well as a reference to the previous and current slide HTML nodes.

Some libraries, like MathJax (see #226), get confused by the transforms and display states of slides. Often times, this can be fixed by calling their update or render function from this callback.

al.addEventListener( 'slidechanged', function( event ) {
// event.previousSlide, event.currentSlide, event.indexh, event.indexv

States

If you set data-state="somestate" on a slide <section>, “somestate” will be applied as a class on the document element when that slide is opened. This allows you to apply broad style changes to the page based on the active slide.

Furthermore you can also listen to these changes in state via JavaScript:

al.addEventListener( 'somestate', function() {
// TODO: Sprinkle magic
alse );

Slide Backgrounds

Slides are contained within a limited portion of the screen by default to allow them to fit any display and scale uniformly. You can apply full page background colors or images by applying a `data-backgroundattribute to your ``

tion data-background="#ff0000">
<h2>All CSS color formats are supported, like rgba() or hsl().</h2>
ction>
tion data-background="http://example.com/image.png">
<h2>This slide will have a full-size background image.</h2>
ction>
tion data-background="http://example.com/image.png" data-background-size="100px" data-background-repeat="repeat">
<h2>This background image will be sized to 100px and repeated.</h2>
ction>

tion data-transition="zoom">
<h2>This slide will override the presentation transition and zoom!</h2>
ction>

tion data-transition-speed="fast">
<h2>Choose from three transition speeds: default, fast or slow!</h2>
ction>

ref="#/2/2">Link</a>
ref="#/some-slide">Link</a>

ref="#" class="navigate-left">
ref="#" class="navigate-right">
ref="#" class="navigate-up">
ref="#" class="navigate-down">
ref="#" class="navigate-prev"> <!-- Previous vertical or horizontal slide -->
ref="#" class="navigate-next"> <!-- Next vertical or horizontal slide -->

tion>
<p class="fragment grow">grow</p>
<p class="fragment shrink">shrink</p>
<p class="fragment roll-in">roll-in</p>
<p class="fragment fade-out">fade-out</p>
<p class="fragment highlight-red">highlight-red</p>
<p class="fragment highlight-green">highlight-green</p>
<p class="fragment highlight-blue">highlight-blue</p>
ction>

tion>
<span class="fragment fade-in">
    <span class="fragment fade-out">I'll fade in, then out</span>
</span>
ction>

tion>
<p class="fragment" data-fragment-index="3">Appears last</p>
<p class="fragment" data-fragment-index="1">Appears first</p>
<p class="fragment" data-fragment-index="2">Appears second</p>
ction>

al.addEventListener( 'fragmentshown', function( event ) {
// event.fragment = the fragment DOM element

al.addEventListener( 'fragmenthidden', function( event ) {
// event.fragment = the fragment DOM element

tion>
<pre><code data-trim>
 lazy-fib
oncat
0 1]
(fn rfib [a b]
    (lazy-cons (+ a b) (rfib b (+ a b)))) 0 1)))
</code></pre>
ction>

al.addEventListener( 'overviewshown', function( event ) { /* ... */ } );
al.addEventListener( 'overviewhidden', function( event ) { /* ... */ } );

oggle the overview mode programmatically
al.toggleOverview();

eo data-autoplay src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>

k rel="stylesheet" href="css/theme/default.css" id="theme">