README.md 49.3 KB
Newer Older
Hakim El Hattab's avatar
Hakim El Hattab committed
1
# reveal.js [![Build Status](https://travis-ci.org/hakimel/reveal.js.svg?branch=master)](https://travis-ci.org/hakimel/reveal.js) <a href="https://slides.com?ref=github"><img src="https://s3.amazonaws.com/static.slid.es/images/slides-github-banner-320x40.png?1" alt="Slides" width="160" height="20"></a>
2

Hakim El Hattab's avatar
Hakim El Hattab committed
3
A framework for easily creating beautiful presentations using HTML. [Check out the live demo](http://lab.hakim.se/reveal-js/).
Hakim El Hattab's avatar
Hakim El Hattab committed
4

Hakim El Hattab's avatar
Hakim El Hattab committed
5
reveal.js comes with a broad range of features including [nested slides](https://github.com/hakimel/reveal.js#markup), [Markdown contents](https://github.com/hakimel/reveal.js#markdown), [PDF export](https://github.com/hakimel/reveal.js#pdf-export), [speaker notes](https://github.com/hakimel/reveal.js#speaker-notes) and a [JavaScript API](https://github.com/hakimel/reveal.js#api). There's also a fully featured visual editor and platform for sharing reveal.js presentations at [slides.com](https://slides.com?ref=github).
Hakim El Hattab's avatar
Hakim El Hattab committed
6

Hakim El Hattab's avatar
Hakim El Hattab committed
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
## Table of contents
- [Online Editor](#online-editor)
- [Instructions](#instructions)
  - [Markup](#markup)
  - [Markdown](#markdown)
  - [Element Attributes](#element-attributes)
  - [Slide Attributes](#slide-attributes)
- [Configuration](#configuration)
- [Presentation Size](#presentation-size)
- [Dependencies](#dependencies)
- [Ready Event](#ready-event)
- [Auto-sliding](#auto-sliding)
- [Keyboard Bindings](#keyboard-bindings)
- [Touch Navigation](#touch-navigation)
- [Lazy Loading](#lazy-loading)
- [API](#api)
  - [Slide Changed Event](#slide-changed-event)
  - [Presentation State](#presentation-state)
  - [Slide States](#slide-states)
  - [Slide Backgrounds](#slide-backgrounds)
  - [Parallax Background](#parallax-background)
  - [Slide Transitions](#slide-transitions)
  - [Internal links](#internal-links)
  - [Fragments](#fragments)
  - [Fragment events](#fragment-events)
  - [Code syntax highlighting](#code-syntax-highlighting)
  - [Slide number](#slide-number)
  - [Overview mode](#overview-mode)
  - [Fullscreen mode](#fullscreen-mode)
  - [Embedded media](#embedded-media)
  - [Stretching elements](#stretching-elements)
  - [postMessage API](#postmessage-api)
- [PDF Export](#pdf-export)
- [Theming](#theming)
- [Speaker Notes](#speaker-notes)
  - [Share and Print Speaker Notes](#share-and-print-speaker-notes)
  - [Server Side Speaker Notes](#server-side-speaker-notes)
- [Multiplexing](#multiplexing)
  - [Master presentation](#master-presentation)
  - [Client presentation](#client-presentation)
  - [Socket.io server](#socketio-server)
- [MathJax](#mathjax)
- [Installation](#installation)
  - [Basic setup](#basic-setup)
  - [Full setup](#full-setup)
  - [Folder Structure](#folder-structure)
- [License](#license)
Hakim El Hattab's avatar
Hakim El Hattab committed
54

55
#### More reading
Hakim El Hattab's avatar
Hakim El Hattab committed
56
- [Changelog](https://github.com/hakimel/reveal.js/releases): Up-to-date version history.
Hakim El Hattab's avatar
Hakim El Hattab committed
57
- [Examples](https://github.com/hakimel/reveal.js/wiki/Example-Presentations): Presentations created with reveal.js, add your own!
Hansi's avatar
Hansi committed
58
- [Browser Support](https://github.com/hakimel/reveal.js/wiki/Browser-Support): Explanation of browser support and fallbacks.
Hakim El Hattab's avatar
Hakim El Hattab committed
59
- [Plugins](https://github.com/hakimel/reveal.js/wiki/Plugins,-Tools-and-Hardware): A list of plugins that can be used to extend reveal.js.
Hakim El Hattab's avatar
Hakim El Hattab committed
60

Hakim El Hattab's avatar
Hakim El Hattab committed
61
## Online Editor
Hakim El Hattab's avatar
Hakim El Hattab committed
62

Hakim El Hattab's avatar
Hakim El Hattab committed
63
Presentations are written using HTML or Markdown but there's also an online editor for those of you who prefer a graphical interface. Give it a try at [https://slides.com](https://slides.com?ref=github).
Hakim El Hattab's avatar
Hakim El Hattab committed
64
65


Hakim El Hattab's avatar
Hakim El Hattab committed
66
## Instructions
67

68
### Markup
69

70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
Here's a barebones example of a fully working reveal.js presentation:
```html
<html>
	<head>
		<link rel="stylesheet" href="css/reveal.css">
		<link rel="stylesheet" href="css/theme/white.css">
	</head>
	<body>
		<div class="reveal">
			<div class="slides">
				<section>Slide 1</section>
				<section>Slide 2</section>
			</div>
		</div>
		<script src="js/reveal.js"></script>
		<script>
			Reveal.initialize();
		</script>
	</body>
</html>
```

Hakim El Hattab's avatar
Hakim El Hattab committed
92
The presentation markup hierarchy needs to be `.reveal > .slides > section` where the `section` represents one slide and can be repeated indefinitely. If you place multiple `section` elements inside of another `section` they will be shown as vertical slides. The first of the vertical slides is the "root" of the others (at the top), and will be included in the horizontal sequence. For example:
93

94
```html
95
<div class="reveal">
hakimel's avatar
hakimel committed
96
	<div class="slides">
97
98
99
100
101
102
103
104
105
		<section>Single Horizontal Slide</section>
		<section>
			<section>Vertical Slide 1</section>
			<section>Vertical Slide 2</section>
		</section>
	</div>
</div>
```

Hakim El Hattab's avatar
Hakim El Hattab committed
106
107
### Markdown

108
It's possible to write your slides using Markdown. To enable Markdown, add the `data-markdown` attribute to your `<section>` elements and wrap the contents in a `<textarea data-template>` like the example below.
Hakim El Hattab's avatar
Hakim El Hattab committed
109

110
This is based on [data-markdown](https://gist.github.com/1343518) from [Paul Irish](https://github.com/paulirish) modified to use [marked](https://github.com/chjj/marked) to support [GitHub Flavored Markdown](https://help.github.com/articles/github-flavored-markdown). Sensitive to indentation (avoid mixing tabs and spaces) and line breaks (avoid consecutive breaks).
Hakim El Hattab's avatar
Hakim El Hattab committed
111
112
113

```html
<section data-markdown>
114
	<textarea data-template>
115
		## Page title
hakimel's avatar
hakimel committed
116

117
		A paragraph with some text and a [link](http://hakim.se).
118
	</textarea>
Hakim El Hattab's avatar
Hakim El Hattab committed
119
120
121
</section>
```

122
123
#### External Markdown

124
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: the `data-separator` attribute defines a regular expression for horizontal slides (defaults to `^\r?\n---\r?\n$`, a newline-bounded horizontal rule)  and `data-separator-vertical` defines vertical slides (disabled by default). The `data-separator-notes` attribute is a regular expression for specifying the beginning of the current slide's speaker notes (defaults to `note:`). The `data-charset` attribute is optional and specifies which charset to use when loading the external file.
125

126
When used locally, this feature requires that reveal.js [runs from a local web server](#full-setup).  The following example customises all available options:
127

128
```html
129
130
<section data-markdown="example.md"  
         data-separator="^\n\n\n"  
131
132
         data-separator-vertical="^\n\n"  
         data-separator-notes="^Note:"  
133
134
         data-charset="iso-8859-15">
</section>
135
136
```

Hakim El Hattab's avatar
Hakim El Hattab committed
137
138
#### Element Attributes

139
Special syntax (in html comment) is available for adding attributes to Markdown elements. This is useful for fragments, amongst other things.
Hakim El Hattab's avatar
Hakim El Hattab committed
140
141
142
143

```html
<section data-markdown>
	<script type="text/template">
144
145
		- Item 1 <!-- .element: class="fragment" data-fragment-index="2" -->
		- Item 2 <!-- .element: class="fragment" data-fragment-index="1" -->
Hakim El Hattab's avatar
Hakim El Hattab committed
146
147
148
149
	</script>
</section>
```

Hakim El Hattab's avatar
Hakim El Hattab committed
150
#### Slide Attributes
Hakim El Hattab's avatar
Hakim El Hattab committed
151

152
Special syntax (in html comment) is available for adding attributes to the slide `<section>` elements generated by your Markdown.
Hakim El Hattab's avatar
Hakim El Hattab committed
153
154
155
156

```html
<section data-markdown>
	<script type="text/template">
Hakim El Hattab's avatar
Hakim El Hattab committed
157
	<!-- .slide: data-background="#ff0000" -->
Hakim El Hattab's avatar
Hakim El Hattab committed
158
		Markdown content
Hakim El Hattab's avatar
Hakim El Hattab committed
159
160
161
162
	</script>
</section>
```

Hakim El Hattab's avatar
Hakim El Hattab committed
163
#### Configuring *marked*
164
165
166
167
168
169
170
171
172
173
174

We use [marked](https://github.com/chjj/marked) to parse Markdown. To customise marked's rendering, you can pass in options when [configuring Reveal](#configuration):

```javascript
Reveal.initialize({
	// Options which are passed into marked
	// See https://github.com/chjj/marked#options-1
	markdown: {
		smartypants: true
	}
});
Hakim El Hattab's avatar
Hakim El Hattab committed
175
```
Hakim El Hattab's avatar
Hakim El Hattab committed
176

177
178
### Configuration

Hakim El Hattab's avatar
Hakim El Hattab committed
179
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.
180

181
```javascript
182
Reveal.initialize({
183

184
	// Display controls in the bottom right corner
185
186
187
188
189
	controls: true,

	// Display a presentation progress bar
	progress: true,

190
191
192
	// Set default timing of 2 minutes per slide
	defaultTiming: 120,

193
194
195
	// Display the page number of the current slide
	slideNumber: false,

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

199
200
201
	// Enable keyboard shortcuts for navigation
	keyboard: true,

202
203
204
	// Enable the slide overview mode
	overview: true,

205
	// Vertical centering of slides
206
	center: true,
207

208
209
210
	// Enables touch navigation on devices with touch input
	touch: true,

211
	// Loop the presentation
212
213
	loop: false,

Hakim El Hattab's avatar
Hakim El Hattab committed
214
215
216
	// Change the presentation direction to be RTL
	rtl: false,

217
218
219
	// Randomizes the order of slides each time the presentation loads
	shuffle: false,

220
221
222
223
224
225
226
	// Turns fragments on and off globally
	fragments: true,

	// Flags if the presentation is running in an embedded mode,
	// i.e. contained within a limited portion of the screen
	embedded: false,

Hakim El Hattab's avatar
Hakim El Hattab committed
227
228
229
230
	// Flags if we should show a help overlay when the questionmark
	// key is pressed
	help: true,

231
232
233
	// Flags if speaker notes should be visible to all viewers
	showNotes: false,

234
235
236
237
238
239
	// Global override for autolaying embedded media (video/audio/iframe)
	// - null: Media will only autoplay if data-autoplay is present
	// - true: All media will autoplay, regardless of individual setting
	// - false: No media will autoplay, regardless of individual setting
	autoPlayMedia: null,

Hakim El Hattab's avatar
Hakim El Hattab committed
240
	// Number of milliseconds between automatically proceeding to the
241
	// next slide, disabled when set to 0, this value can be overwritten
242
	// by using a data-autoslide attribute on your slides
243
244
	autoSlide: 0,

245
246
247
	// Stop auto-sliding after user input
	autoSlideStoppable: true,

248
249
	// Use this method for navigation when auto-sliding
	autoSlideMethod: Reveal.navigateNext,
MichiK's avatar
MichiK committed
250

251
	// Enable slide navigation via mouse wheel
252
	mouseWheel: false,
253

254
255
256
257
258
259
	// Hides the address bar on mobile devices
	hideAddressBar: true,

	// Opens links in an iframe preview overlay
	previewLinks: false,

260
	// Transition style
261
	transition: 'slide', // none/fade/slide/convex/concave/zoom
262
263
264

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

266
	// Transition style for full page slide backgrounds
267
	backgroundTransition: 'fade', // none/fade/slide/convex/concave/zoom
268
269

	// Number of slides away from the current that are visible
270
	viewDistance: 3,
271

272
	// Parallax background image
273
	parallaxBackgroundImage: '', // e.g. "'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg'"
274

275
	// Parallax background size
276
	parallaxBackgroundSize: '', // CSS syntax, e.g. "2100px 900px"
277

278
279
280
281
	// Number of pixels to move the parallax background per slide
	// - Calculated automatically unless specified
	// - Set to 0 to disable movement along an axis
	parallaxBackgroundHorizontal: null,
282
283
284
285
	parallaxBackgroundVertical: null,

	// The display mode that will be used to show slides
	display: 'block'
286

287
288
289
});
```

Hakim El Hattab's avatar
Hakim El Hattab committed
290

wtw's avatar
wtw committed
291
The configuration can be updated after initialization using the ```configure``` method:
292
293
294
295
296
297
298
299
300

```javascript
// Turn autoSlide off
Reveal.configure({ autoSlide: 0 });

// Start auto-sliding every 5s
Reveal.configure({ autoSlide: 5000 });
```

301

302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
### 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:

```javascript
Reveal.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.5

});
```

329
330
331
332
333
334
335
336
337
338
339
340
341
342
If you wish to disable this behavior and do your own scaling (e.g. using media queries), try these settings:

```javascript
Reveal.initialize({

	...

	width: "100%",
	height: "100%",
	margin: 0,
	minScale: 1,
	maxScale: 1
});
```
343

Hakim El Hattab's avatar
Hakim El Hattab committed
344
345
346
347
348
349
350
### 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:

```javascript
Reveal.initialize({
	dependencies: [
Hakim El Hattab's avatar
Hakim El Hattab committed
351
		// Cross-browser shim that fully implements classList - https://github.com/eligrey/classList.js/
352
		{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
hakimel's avatar
hakimel committed
353

Hakim El Hattab's avatar
Hakim El Hattab committed
354
		// Interpret Markdown in <section> elements
355
		{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
356
		{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
hakimel's avatar
hakimel committed
357

358
359
		// Syntax highlight for <code> elements
		{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
hakimel's avatar
hakimel committed
360

Dan Dascalescu's avatar
Dan Dascalescu committed
361
		// Zoom in and out with Alt+click
362
		{ src: 'plugin/zoom-js/zoom.js', async: true },
363

364
		// Speaker notes
365
		{ src: 'plugin/notes/notes.js', async: true },
366

Hakim El Hattab's avatar
Hakim El Hattab committed
367
368
		// MathJax
		{ src: 'plugin/math/math.js', async: true }
Hakim El Hattab's avatar
Hakim El Hattab committed
369
370
371
372
373
374
375
376
377
378
	]
});
```

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

379
To load these dependencies, reveal.js requires [head.js](http://headjs.com/) *(a script loading library)* to be loaded before reveal.js.
Hakim El Hattab's avatar
Hakim El Hattab committed
380

381
382
383
384
385
386
387
388
389
390
### Ready Event

A 'ready' event is fired when reveal.js has loaded all non-async dependencies and is ready to start navigating. To check if reveal.js is already 'ready' you can call `Reveal.isReady()`.

```javascript
Reveal.addEventListener( 'ready', function( event ) {
	// event.currentSlide, event.indexh, event.indexv
} );
```

391
Note that we also add a `.ready` class to the `.reveal` element so that you can hook into this with CSS.
392

393
394
### Auto-sliding

kayakr's avatar
kayakr committed
395
Presentations can be configured to progress through slides automatically, without any user input. To enable this you will need to tell the framework how many milliseconds it should wait between slides:
396
397
398
399
400
401
402

```javascript
// Slide every five seconds
Reveal.configure({
  autoSlide: 5000
});
```
rajgoel's avatar
rajgoel committed
403
When this is turned on a control element will appear that enables users to pause and resume auto-sliding. Alternatively, sliding can be paused or resumed by pressing »a« on the keyboard. Sliding is paused automatically as soon as the user starts navigating. You can disable these controls by specifying ```autoSlideStoppable: false``` in your reveal.js config.
404

405
You can also override the slide duration for individual slides and fragments by using the ```data-autoslide``` attribute:
406
407

```html
rajgoel's avatar
rajgoel committed
408
409
410
411
412
<section data-autoslide="2000">
	<p>After 2 seconds the first fragment will be shown.</p>
	<p class="fragment" data-autoslide="10000">After 10 seconds the next fragment will be shown.</p>
	<p class="fragment">Now, the fragment is displayed for 2 seconds before the next slide is shown.</p>
</section>
413
414
```

415
416
To override the method used for navigation when auto-sliding, you can specify the ```autoSlideMethod``` setting. To only navigate along the top layer and ignore vertical slides, set this to ```Reveal.navigateRight```.

417
418
Whenever the auto-slide mode is resumed or paused the ```autoslideresumed``` and ```autoslidepaused``` events are fired.

419

420
421
422
423
424
425
426
427
428
429
430
431
432
433
### Keyboard Bindings

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

```javascript
Reveal.configure({
  keyboard: {
    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)
  }
});
```

434
435
436
437
438
439
440
### Touch Navigation

You can swipe to navigate through a presentation on any touch-enabled device. Horizontal swipes change between horizontal slides, vertical swipes change between vertical slides. If you wish to disable this you can set the `touch` config option to false when initializing reveal.js.

If there's some part of your content that needs to remain accessible to touch events you'll need to highlight this by adding a `data-prevent-swipe` attribute to the element. One common example where this is useful is elements that need to be scrolled.


Hakim El Hattab's avatar
Hakim El Hattab committed
441
442
### Lazy Loading

443
When working on presentation with a lot of media or iframe content it's important to load lazily. Lazy loading means that reveal.js will only load content for the few slides nearest to the current slide. The number of slides that are preloaded is determined by the `viewDistance` configuration option.
Hakim El Hattab's avatar
Hakim El Hattab committed
444

445
To enable lazy loading all you need to do is change your "src" attributes to "data-src" as shown below. This is supported for image, video, audio and iframe elements. Lazy loaded iframes will also unload when the containing slide is no longer visible.
Hakim El Hattab's avatar
Hakim El Hattab committed
446
447
448
449

```html
<section>
  <img data-src="image.png">
Hakim El Hattab's avatar
Hakim El Hattab committed
450
  <iframe data-src="http://hakim.se"></iframe>
Hakim El Hattab's avatar
Hakim El Hattab committed
451
452
453
454
455
456
457
  <video>
    <source data-src="video.webm" type="video/webm" />
    <source data-src="video.mp4" type="video/mp4" />
  </video>
</section>
```

458

459
460
### API

461
The ``Reveal`` object exposes a JavaScript API for controlling navigation and reading state:
462

Hakim El Hattab's avatar
Hakim El Hattab committed
463
```javascript
464
// Navigation
Federico Fissore's avatar
Federico Fissore committed
465
Reveal.slide( indexh, indexv, indexf );
466
467
468
469
470
471
Reveal.left();
Reveal.right();
Reveal.up();
Reveal.down();
Reveal.prev();
Reveal.next();
472
473
Reveal.prevFragment();
Reveal.nextFragment();
474

475
476
477
// Randomize the order of slides
Reveal.shuffle();

478
// Toggle presentation states, optionally pass true/false to force on/off
Hakim El Hattab's avatar
Hakim El Hattab committed
479
Reveal.toggleOverview();
Hakim El Hattab's avatar
Hakim El Hattab committed
480
Reveal.togglePause();
rajgoel's avatar
rajgoel committed
481
Reveal.toggleAutoSlide();
482

483
484
485
486
// Shows a help overlay with keyboard shortcuts, optionally pass true/false
// to force on/off
Reveal.toggleHelp();

487
488
489
// Change a config value at runtime
Reveal.configure({ controls: true });

490
// Returns the present configuration options
491
492
493
494
495
Reveal.getConfig();

// Fetch the current scale of the presentation
Reveal.getScale();

496
497
498
499
// Retrieves the previous and current slide elements
Reveal.getPreviousSlide();
Reveal.getCurrentSlide();

Adam Spiers's avatar
Adam Spiers committed
500
Reveal.getIndices();        // { h: 0, v: 0 } }
501
Reveal.getPastSlideCount();
Adam Spiers's avatar
Adam Spiers committed
502
503
504
Reveal.getProgress();       // (0 == first slide, 1 == last slide)
Reveal.getSlides();         // Array of all slides
Reveal.getTotalSlides();    // total number of slides
Hakim El Hattab's avatar
Hakim El Hattab committed
505

506
507
508
// Returns the speaker notes for the current slide
Reveal.getSlideNotes();

Hakim El Hattab's avatar
Hakim El Hattab committed
509
510
511
512
513
// State checks
Reveal.isFirstSlide();
Reveal.isLastSlide();
Reveal.isOverview();
Reveal.isPaused();
514
Reveal.isAutoSliding();
Hakim El Hattab's avatar
Hakim El Hattab committed
515
```
516

517
### Slide Changed Event
518

Branden Byers's avatar
Branden Byers committed
519
A '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.
520

Hakim El Hattab's avatar
Hakim El Hattab committed
521
522
Some libraries, like MathJax (see [#226](https://github.com/hakimel/reveal.js/issues/226#issuecomment-10261609)), 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.

523
```javascript
524
Reveal.addEventListener( 'slidechanged', function( event ) {
525
	// event.previousSlide, event.currentSlide, event.indexh, event.indexv
526
527
528
} );
```

529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
### Presentation State

The presentation's current state can be fetched by using the `getState` method. A state object contains all of the information required to put the presentation back as it was when `getState` was first called. Sort of like a snapshot. It's a simple object that can easily be stringified and persisted or sent over the wire.

```javascript
Reveal.slide( 1 );
// we're on slide 1

var state = Reveal.getState();

Reveal.slide( 3 );
// we're on slide 3

Reveal.setState( state );
// we're back on slide 1
```

### Slide States
547
548
549
550
551
552
553
554
555
556
557
558

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:

```javascript
Reveal.addEventListener( 'somestate', function() {
	// TODO: Sprinkle magic
}, false );
```

### Slide Backgrounds
559

Hakim El Hattab's avatar
Hakim El Hattab committed
560
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 backgrounds outside of the slide area by adding a ```data-background``` attribute to your ```<section>``` elements. Four different types of backgrounds are supported: color, image, video and iframe.
561

562
#### Color Backgrounds
Hakim El Hattab's avatar
Hakim El Hattab committed
563
All CSS color formats are supported, like rgba() or hsl().
564
```html
Hakim El Hattab's avatar
Hakim El Hattab committed
565
566
<section data-background-color="#ff0000">
	<h2>Color</h2>
567
</section>
Hakim El Hattab's avatar
Hakim El Hattab committed
568
569
```

570
#### Image Backgrounds
Hakim El Hattab's avatar
Hakim El Hattab committed
571
572
573
574
575
576
577
578
579
580
581
By default, background images are resized to cover the full page. Available options:

| Attribute                    | Default    | Description |
| :--------------------------- | :--------- | :---------- |
| data-background-image        |            | URL of the image to show. GIFs restart when the slide opens. |
| data-background-size         | cover      | See [background-size](https://developer.mozilla.org/docs/Web/CSS/background-size) on MDN.  |
| data-background-position     | center     | See [background-position](https://developer.mozilla.org/docs/Web/CSS/background-position) on MDN. |
| data-background-repeat       | no-repeat  | See [background-repeat](https://developer.mozilla.org/docs/Web/CSS/background-repeat) on MDN. |
```html
<section data-background-image="http://example.com/image.png">
	<h2>Image</h2>
582
</section>
Hakim El Hattab's avatar
Hakim El Hattab committed
583
584
<section data-background-image="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>
585
</section>
Hakim El Hattab's avatar
Hakim El Hattab committed
586
587
```

588
#### Video Backgrounds
Hakim El Hattab's avatar
Hakim El Hattab committed
589
590
591
592
593
594
595
Automatically plays a full size video behind the slide.

| Attribute                    | Default | Description |
| :--------------------------- | :------ | :---------- |
| data-background-video        |         | A single video source, or a comma separated list of video sources. |
| data-background-video-loop   | false   | Flags if the video should play repeatedly. |
| data-background-video-muted  | false   | Flags if the audio should be muted. |
596
| data-background-size         | cover   | Use `cover` for full screen and some cropping or `contain` for letterboxing. |
Hakim El Hattab's avatar
Hakim El Hattab committed
597
598

```html
599
<section data-background-video="https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.mp4,https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.webm" data-background-video-loop data-background-video-muted>
Hakim El Hattab's avatar
Hakim El Hattab committed
600
	<h2>Video</h2>
601
</section>
Hakim El Hattab's avatar
Hakim El Hattab committed
602
603
```

604
#### Iframe Backgrounds
Hakim El Hattab's avatar
Hakim El Hattab committed
605
Embeds a web page as a slide background that covers 100% of the reveal.js width and height. The iframe is in the background layer, behind your slides, and as such it's not possible to interact with it by default. To make your background interactive, you can add the `data-background-interactive` attribute.
Hakim El Hattab's avatar
Hakim El Hattab committed
606
```html
Hakim El Hattab's avatar
Hakim El Hattab committed
607
<section data-background-iframe="https://slides.com" data-background-interactive>
Hakim El Hattab's avatar
Hakim El Hattab committed
608
	<h2>Iframe</h2>
609
</section>
610
611
```

612
#### Background Transitions
613
Backgrounds transition using a fade animation by default. This can be changed to a linear sliding transition by passing ```backgroundTransition: 'slide'``` to the ```Reveal.initialize()``` call. Alternatively you can set ```data-background-transition``` on any section with a background to override that specific transition.
614

615

616
617
### Parallax Background

618
If you want to use a parallax scrolling background, set the first two config properties below when initializing reveal.js (the other two are optional).
619
620
621

```javascript
Reveal.initialize({
622

623
	// Parallax background image
624
	parallaxBackgroundImage: '', // e.g. "https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg"
625

626
	// Parallax background size
627
	parallaxBackgroundSize: '', // CSS syntax, e.g. "2100px 900px" - currently only pixels are supported (don't use % or auto)
628

629
630
631
	// Number of pixels to move the parallax background per slide
	// - Calculated automatically unless specified
	// - Set to 0 to disable movement along an axis
632
633
	parallaxBackgroundHorizontal: 200,
	parallaxBackgroundVertical: 50
634
635
636
637

});
```

638
Make sure that the background size is much bigger than screen size to allow for some scrolling. [View example](http://lab.hakim.se/reveal-js/?parallaxBackgroundImage=https%3A%2F%2Fs3.amazonaws.com%2Fhakim-static%2Freveal-js%2Freveal-parallax-1.jpg&parallaxBackgroundSize=2100px%20900px).
639
640


641

642
643
### Slide Transitions
The global presentation transition is set using the ```transition``` config value. You can override the global transition for a specific slide by using the ```data-transition``` attribute:
Hakim El Hattab's avatar
Hakim El Hattab committed
644

645
646
647
648
```html
<section data-transition="zoom">
	<h2>This slide will override the presentation transition and zoom!</h2>
</section>
Hakim El Hattab's avatar
Hakim El Hattab committed
649

650
651
652
<section data-transition-speed="fast">
	<h2>Choose from three transition speeds: default, fast or slow!</h2>
</section>
Hakim El Hattab's avatar
Hakim El Hattab committed
653
654
```

655
You can also use different in and out transitions for the same slide:
Johannes Ammon's avatar
Johannes Ammon committed
656
657
658

```html
<section data-transition="slide">
659
    The train goes on …
Johannes Ammon's avatar
Johannes Ammon committed
660
</section>
661
662
<section data-transition="slide">
    and on …
Johannes Ammon's avatar
Johannes Ammon committed
663
</section>
664
<section data-transition="slide-in fade-out">
Johannes Ammon's avatar
Johannes Ammon committed
665
666
    and stops.
</section>
667
<section data-transition="fade-in slide-out">
Johannes Ammon's avatar
Johannes Ammon committed
668
669
670
671
672
673
674
675
    (Passengers entering and leaving)
</section>
<section data-transition="slide">
    And it starts again.
</section>
```


Hakim El Hattab's avatar
Hakim El Hattab committed
676
677
678
679
680
681
682
683
### Internal links

It's easy to link between slides. The first example below targets the index of another slide whereas the second targets a slide with an ID attribute (```<section id="some-slide">```):

```html
<a href="#/2/2">Link</a>
<a href="#/some-slide">Link</a>
```
684

Dan Dascalescu's avatar
Dan Dascalescu committed
685
You can also add relative navigation links, similar to the built in reveal.js controls, by appending one of the following classes on any element. Note that each element is automatically given an ```enabled``` class when it's a valid navigation route based on the current slide.
686
687
688
689
690
691

```html
<a href="#" class="navigate-left">
<a href="#" class="navigate-right">
<a href="#" class="navigate-up">
<a href="#" class="navigate-down">
Hakim El Hattab's avatar
Hakim El Hattab committed
692
<a href="#" class="navigate-prev"> <!-- Previous vertical or horizontal slide -->
693
694
695
696
<a href="#" class="navigate-next"> <!-- Next vertical or horizontal slide -->
```


Hakim El Hattab's avatar
Hakim El Hattab committed
697
### Fragments
698
Fragments are used to highlight individual elements on a slide. Every element with the class ```fragment``` will be stepped through before moving on to the next slide. Here's an example: http://lab.hakim.se/reveal-js/#/fragments
Hakim El Hattab's avatar
Hakim El Hattab committed
699
700
701
702
703
704
705
706

The default fragment style is to start out invisible and fade in. This style can be changed by appending a different class to the fragment:

```html
<section>
	<p class="fragment grow">grow</p>
	<p class="fragment shrink">shrink</p>
	<p class="fragment fade-out">fade-out</p>
707
	<p class="fragment fade-up">fade-up (also down, left and right!)</p>
708
709
	<p class="fragment current-visible">visible only once</p>
	<p class="fragment highlight-current-blue">blue only once</p>
Hakim El Hattab's avatar
Hakim El Hattab committed
710
711
712
713
714
715
	<p class="fragment highlight-red">highlight-red</p>
	<p class="fragment highlight-green">highlight-green</p>
	<p class="fragment highlight-blue">highlight-blue</p>
</section>
```

716
717
Multiple fragments can be applied to the same element sequentially by wrapping it, this will fade in the text on the first step and fade it back out on the second.

Hakim El Hattab's avatar
Hakim El Hattab committed
718
```html
719
<section>
720
	<span class="fragment fade-in">
721
722
723
724
725
		<span class="fragment fade-out">I'll fade in, then out</span>
	</span>
</section>
```

726
727
728
729
730
731
732
733
734
735
The display order of fragments can be controlled using the ```data-fragment-index``` attribute.

```html
<section>
	<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>
</section>
```

736
737
738
739
### Fragment events

When a slide fragment is either shown or hidden reveal.js will dispatch an event.

Hakim El Hattab's avatar
Hakim El Hattab committed
740
741
Some libraries, like MathJax (see #505), get confused by the initially hidden fragment elements. Often times this can be fixed by calling their update or render function from this callback.

742
```javascript
743
744
745
746
747
748
749
750
Reveal.addEventListener( 'fragmentshown', function( event ) {
	// event.fragment = the fragment DOM element
} );
Reveal.addEventListener( 'fragmenthidden', function( event ) {
	// event.fragment = the fragment DOM element
} );
```

wtw's avatar
wtw committed
751
### Code syntax highlighting
752

Hakim El Hattab's avatar
Hakim El Hattab committed
753
By default, Reveal is configured with [highlight.js](https://highlightjs.org/) for code syntax highlighting. Below is an example with clojure code that will be syntax highlighted. When the `data-trim` attribute is present, surrounding whitespace is automatically removed.  HTML will be escaped by default. To avoid this, for example if you are using `<mark>` to call out a line of code, add the `data-noescape` attribute to the `<code>` element.
754
755
756

```html
<section>
757
	<pre><code data-trim data-noescape>
758
759
760
(def lazy-fib
  (concat
   [0 1]
761
   <mark>((fn rfib [a b]</mark>
762
        (lazy-cons (+ a b) (rfib b (+ a b)))) 0 1)))
763
	</code></pre>
764
765
766
</section>
```

767
### Slide number
768
If you would like to display the page number of the current slide you can do so using the ```slideNumber``` and ```showSlideNumber``` configuration values.
769
770

```javascript
771
// Shows the slide number using default formatting
772
Reveal.configure({ slideNumber: true });
773
774

// Slide number formatting can be configured using these variables:
Hakim El Hattab's avatar
Hakim El Hattab committed
775
776
//  "h.v": 	horizontal . vertical slide number (default)
//  "h/v": 	horizontal / vertical slide number
Hakim El Hattab's avatar
Hakim El Hattab committed
777
778
779
//    "c": 	flattened slide number
//  "c/t": 	flattened slide number / total slides
Reveal.configure({ slideNumber: 'c/t' });
780

781
782
783
784
785
// Control which views the slide number displays on using the "showSlideNumber" value:
//     "all": show on all views (default)
// "speaker": only show slide numbers on speaker notes view
//   "print": only show slide numbers when printing to PDF
Reveal.configure({ showSlideNumber: 'speaker' });
786

787
788
```

789

Hakim El Hattab's avatar
Hakim El Hattab committed
790
791
### Overview mode

792
Press "Esc" or "o" keys to toggle the overview mode on and off. While you're in this mode, you can still navigate between slides,
793
794
795
796
797
798
799
800
801
as if you were at 1,000 feet above your presentation. The overview mode comes with a few API hooks:

```javascript
Reveal.addEventListener( 'overviewshown', function( event ) { /* ... */ } );
Reveal.addEventListener( 'overviewhidden', function( event ) { /* ... */ } );

// Toggle the overview mode programmatically
Reveal.toggleOverview();
```
Hakim El Hattab's avatar
Hakim El Hattab committed
802

803

Hakim El Hattab's avatar
Hakim El Hattab committed
804
805
806
### Fullscreen mode
Just press »F« on your keyboard to show your presentation in fullscreen mode. Press the »ESC« key to exit fullscreen mode.

807

Hakim El Hattab's avatar
Hakim El Hattab committed
808
809
810
811
### Embedded media
Add `data-autoplay` to your media element if you want it to automatically start playing when the slide is shown:

```html
Hakim El Hattab's avatar
Hakim El Hattab committed
812
<video data-autoplay src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
Hakim El Hattab's avatar
Hakim El Hattab committed
813
814
```

815
816
817
818
819
820
821
822
If you want to enable or disable autoplay globally, for all embedded media, you can use the `autoPlayMedia` configuration option. If you set this to `true` ALL media will autoplay regardless of individual `data-autoplay` attributes. If you initialize with `autoPlayMedia: false` NO media will autoplay.

Note that embedded HTML5 `<video>`/`<audio>` and YouTube/Vimeo iframes are automatically paused when you navigate away from a slide. This can be disabled by decorating your element with a `data-ignore` attribute.


### Embedded iframes

reveal.js automatically pushes two [post messages](https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage) to embedded iframes. ```slide:start``` when the slide containing the iframe is made visible and ```slide:stop``` when it is hidden.
823

Hakim El Hattab's avatar
Hakim El Hattab committed
824

Hakim El Hattab's avatar
Hakim El Hattab committed
825
### Stretching elements
Hakim El Hattab's avatar
Hakim El Hattab committed
826
Sometimes it's desirable to have an element, like an image or video, stretch to consume as much space as possible within a given slide. This can be done by adding the ```.stretch``` class to an element as seen below:
Hakim El Hattab's avatar
Hakim El Hattab committed
827
828
829
830
831
832
833
834
835

```html
<section>
	<h2>This video will use up the remaining space on the slide</h2>
    <video class="stretch" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
</section>
```

Limitations:
Hakim El Hattab's avatar
Hakim El Hattab committed
836
837
- Only direct descendants of a slide section can be stretched
- Only one descendant per slide section can be stretched
Hakim El Hattab's avatar
Hakim El Hattab committed
838
839


840
841
842
843
844
845
846
847
848
849
850
851
### postMessage API
The framework has a built-in postMessage API that can be used when communicating with a presentation inside of another window. Here's an example showing how you'd make a reveal.js instance in the given window proceed to slide 2:

```javascript
<window>.postMessage( JSON.stringify({ method: 'slide', args: [ 2 ] }), '*' );
```

When reveal.js runs inside of an iframe it can optionally bubble all of its events to the parent. Bubbled events are stringified JSON with three fields: namespace, eventName and state. Here's how you subscribe to them from the parent window:

```javascript
window.addEventListener( 'message', function( event ) {
	var data = JSON.parse( event.data );
852
	if( data.namespace === 'reveal' && data.eventName ==='slidechanged' ) {
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
		// Slide changed, see data.state for slide number
	}
} );
```

This cross-window messaging can be toggled on or off using configuration flags.

```javascript
Reveal.initialize({
	...,

	// Exposes the reveal.js API through window.postMessage
	postMessage: true,

	// Dispatches all reveal.js events to the parent window through postMessage
	postMessageEvents: false
});
```


873
874
## PDF Export

875
Presentations can be exported to PDF via a special print stylesheet. This feature requires that you use [Google Chrome](http://google.com/chrome) or [Chromium](https://www.chromium.org/Home) and to be serving the presentation from a webserver.
Hakim El Hattab's avatar
Hakim El Hattab committed
876
Here's an example of an exported presentation that's been uploaded to SlideShare: http://www.slideshare.net/hakimel/revealjs-300.
877

878
### Page size
Hakim El Hattab's avatar
Hakim El Hattab committed
879
Export dimensions are inferred from the configured [presentation size](#presentation-size). Slides that are too tall to fit within a single page will expand onto multiple pages. You can limit how many pages a slide may expand onto using the `pdfMaxPagesPerSlide` config option, for example `Reveal.configure({ pdfMaxPagesPerSlide: 1 })` ensures that no slide ever grows to more than one printed page.
880

Hakim El Hattab's avatar
Hakim El Hattab committed
881
### Print stylesheet
882
To enable the PDF print capability in your presentation, the special print stylesheet at [/css/print/pdf.css](https://github.com/hakimel/reveal.js/blob/master/css/print/pdf.css) must be loaded. The default index.html file handles this for you when `print-pdf` is included in the query string. If you're using a different HTML template, you can add this to your HEAD:
gilxa1226's avatar
gilxa1226 committed
883

884
```html
gilxa1226's avatar
gilxa1226 committed
885
886
887
888
889
890
891
<script>
	var link = document.createElement( 'link' );
	link.rel = 'stylesheet';
	link.type = 'text/css';
	link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
	document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
892
```
gilxa1226's avatar
gilxa1226 committed
893

Hakim El Hattab's avatar
Hakim El Hattab committed
894
### Instructions
895
1. Open your presentation with `print-pdf` included in the query string i.e. http://localhost:8000/?print-pdf. You can test this with [lab.hakim.se/reveal-js?print-pdf](http://lab.hakim.se/reveal-js?print-pdf).
896
897
898
899
900
901
902
  * If you want to include [speaker notes](#speaker-notes) in your export, you can append `showNotes=true` to the query string: http://localhost:8000/?print-pdf&showNotes=true
1. Open the in-browser print dialog (CTRL/CMD+P).
1. Change the **Destination** setting to **Save as PDF**.
1. Change the **Layout** to **Landscape**.
1. Change the **Margins** to **None**.
1. Enable the **Background graphics** option.
1. Click **Save**.
903

904
![Chrome Print Settings](https://s3.amazonaws.com/hakim-static/reveal-js/pdf-print-settings-2.png)
905

906
907
Alternatively you can use the [decktape](https://github.com/astefanutti/decktape) project.

Hakim El Hattab's avatar
Hakim El Hattab committed
908
909
910
911
## Theming

The framework comes with a few different themes included:

912
- black: Black background, white text, blue links (default theme)
913
- white: White background, black text, blue links
914
- league: Gray background, white text, blue links (default theme for reveal.js < 3.0.0)
Hakim El Hattab's avatar
Hakim El Hattab committed
915
- beige: Beige background, dark text, brown links
Anton's avatar
Anton committed
916
- sky: Blue background, thin dark text, blue links
Hakim El Hattab's avatar
Hakim El Hattab committed
917
918
919
- night: Black background, thick white text, orange links
- serif: Cappuccino background, gray text, brown links
- simple: White background, black text, blue links
920
- solarized: Cream-colored background, dark green text, blue links
Hakim El Hattab's avatar
Hakim El Hattab committed
921

922
Each theme is available as a separate stylesheet. To change theme you will need to replace **black** below with your desired theme name in index.html:
Hakim El Hattab's avatar
Hakim El Hattab committed
923
924

```html
925
<link rel="stylesheet" href="css/theme/black.css" id="theme">
Hakim El Hattab's avatar
Hakim El Hattab committed
926
927
928
929
930
```

If you want to add a theme of your own see the instructions here: [/css/theme/README.md](https://github.com/hakimel/reveal.js/blob/master/css/theme/README.md).


931
## Speaker Notes
932

Hakim El Hattab's avatar
Hakim El Hattab committed
933
reveal.js comes with a speaker notes plugin which can be used to present per-slide notes in a separate browser window. The notes window also gives you a preview of the next upcoming slide so it may be helpful even if you haven't written any notes. Press the 's' key on your keyboard to open the notes window.
934

935
936
A speaker timer starts as soon as the speaker view is opened. You can reset it to 00:00:00 at any time by simply clicking/tapping on it.

937
Notes are defined by appending an ```<aside>``` element to a slide as seen below. You can add the ```data-markdown``` attribute to the aside element if you prefer writing notes using Markdown.
938

939
940
Alternatively you can add your notes in a `data-notes` attribute on the slide. Like `<section data-notes="Something important"></section>`.

941
942
When used locally, this feature requires that reveal.js [runs from a local web server](#full-setup).

943
944
945
```html
<section>
	<h2>Some Slide</h2>
946

947
948
949
950
951
	<aside class="notes">
		Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).
	</aside>
</section>
```
952

953
954
If you're using the external Markdown plugin, you can add notes with the help of a special delimiter:

955
```html
956
<section data-markdown="example.md" data-separator="^\n\n\n" data-separator-vertical="^\n\n" data-separator-notes="^Note:"></section>
957
958
959
960
961

# Title
## Sub-title

Here is some content...
962
963
964

Note:
This will only display in the notes window.
965
966
```

967
968
969
970
#### Share and Print Speaker Notes

Notes are only visible to the speaker inside of the speaker view. If you wish to share your notes with others you can initialize reveal.js with the `showNotes` config value set to `true`. Notes will appear along the bottom of the presentations.

Hakim El Hattab's avatar
typo    
Hakim El Hattab committed
971
When `showNotes` is enabled notes are also included when you [export to PDF](https://github.com/hakimel/reveal.js#pdf-export). By default, notes are printed in a semi-transparent box on top of the slide. If you'd rather print them on a separate page after the slide, set `showNotes: "separate-page"`.
972

973
#### Speaker notes clock and timers
974
975
976
977
978

The speaker notes window will also show:

- Time elapsed since the beginning of the presentation.  If you hover the mouse above this section, a timer reset button will appear.
- Current wall-clock time
979
980
981
- (Optionally) a pacing timer which indicates whether the current pace of the presentation is on track for the right timing (shown in green), and if not, whether the presenter should speed up (shown in red) or has the luxury of slowing down (blue).

The pacing timer can be enabled by configuring by the `defaultTiming` parameter in the `Reveal` configuration block, which specifies the number of seconds per slide.  120 can be a reasonable rule of thumb.  Timings can also be given per slide `<section>` by setting the `data-timing` attribute.  Both values are in numbers of seconds.
982
983


wtw's avatar
wtw committed
984
## Server Side Speaker Notes
985

wtw's avatar
wtw committed
986
In some cases it can be desirable to run notes on a separate device from the one you're presenting on. The Node.js-based notes plugin lets you do this using the same note definitions as its client side counterpart. Include the required scripts by adding the following dependencies:
987

Hakim El Hattab's avatar
Hakim El Hattab committed
988
```javascript
989
990
991
992
993
994
995
996
Reveal.initialize({
	...

	dependencies: [
		{ src: 'socket.io/socket.io.js', async: true },
		{ src: 'plugin/notes-server/client.js', async: true }
	]
});
997
998
999
1000
```

Then:

1001
1. Install [Node.js](http://nodejs.org/) (4.0.0 or later)
1002
1003
1004
2. Run ```npm install```
3. Run ```node plugin/notes-server```

1005

1006
1007
## Multiplexing

1008
The multiplex plugin allows your audience to view the slides of the presentation you are controlling on their own phone, tablet or laptop. As the master presentation navigates the slides, all client presentations will update in real time. See a demo at [https://reveal-js-multiplex-ccjbegmaii.now.sh/](https://reveal-js-multiplex-ccjbegmaii.now.sh/).
1009

1010
The multiplex plugin needs the following 3 things to operate:
1011

1012
1013
1014
1015
1016
1017
1018
1. Master presentation that has control
2. Client presentations that follow the master
3. Socket.io server to broadcast events from the master to the clients

More details:

#### Master presentation
1019
Served from a static file server accessible (preferably) only to the presenter. This need only be on your (the presenter's) computer. (It's safer to run the master presentation from your own computer, so if the venue's Internet goes down it doesn't stop the show.) An example would be to execute the following commands in the directory of your master presentation:
1020
1021
1022
1023

1. ```npm install node-static```
2. ```static```

Hakim El Hattab's avatar
Hakim El Hattab committed
1024
If you want to use the speaker notes plugin with your master presentation then make sure you have the speaker notes plugin configured correctly along with the configuration shown below, then execute ```node plugin/notes-server``` in the directory of your master presentation. The configuration below will cause it to connect to the socket.io server as a master, as well as launch your speaker-notes/static-file server.
1025
1026
1027
1028

You can then access your master presentation at ```http://localhost:1947```

Example configuration:
1029
```javascript
1030
Reveal.initialize({
Hakim El Hattab's avatar
Hakim El Hattab committed
1031
	// other options...
1032
1033

	multiplex: {
Hakim El Hattab's avatar
Hakim El Hattab committed
1034
		// Example values. To generate your own, see the socket.io server instructions.
1035
1036
		secret: '13652805320794272084', // Obtained from the socket.io server. Gives this (the master) control of the presentation
		id: '1ea875674b17ca76', // Obtained from socket.io server
1037
		url: 'https://reveal-js-multiplex-ccjbegmaii.now.sh' // Location of socket.io server
1038
1039
	},

Hakim El Hattab's avatar
Hakim El Hattab committed
1040
	// Don't forget to add the dependencies
1041
	dependencies: [
1042
		{ src: '//cdn.socket.io/socket.io-1.3.5.js', async: true },