slide_hero 0.0.10 → 0.0.11
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/.ruby-version +1 -1
- data/Gemfile +1 -1
- data/README.md +2 -2
- data/lib/slide_hero/blockquote.rb +10 -0
- data/lib/slide_hero/pluggable.rb +4 -4
- data/lib/slide_hero/plugins.rb +0 -1
- data/lib/slide_hero/presentation.rb +3 -3
- data/lib/slide_hero/slide.rb +2 -2
- data/lib/slide_hero/version.rb +1 -1
- data/lib/slide_hero/views/blockquote.html.erb +3 -0
- data/lib/slide_hero.rb +1 -0
- data/test/slide_hero/blockquote_spec.rb +13 -0
- data/test/slide_hero/plugins_spec.rb +0 -1
- data/test/slide_hero/presentation_spec.rb +2 -1
- data/test/slide_hero/slide_spec.rb +14 -3
- data/test/slide_hero_spec.rb +1 -0
- data/vendor/reveal.js/.gitignore +6 -1
- data/vendor/reveal.js/.travis.yml +1 -1
- data/vendor/reveal.js/CONTRIBUTING.md +4 -0
- data/vendor/reveal.js/Gruntfile.js +26 -24
- data/vendor/reveal.js/LICENSE +1 -1
- data/vendor/reveal.js/README.md +215 -124
- data/vendor/reveal.js/bower.json +27 -0
- data/vendor/reveal.js/css/print/paper.css +1 -1
- data/vendor/reveal.js/css/print/pdf.css +30 -27
- data/vendor/reveal.js/css/reveal.css +381 -191
- data/vendor/reveal.js/css/reveal.scss +259 -164
- data/vendor/reveal.js/css/theme/README.md +2 -6
- data/vendor/reveal.js/css/theme/beige.css +75 -49
- data/vendor/reveal.js/css/theme/black.css +64 -38
- data/vendor/reveal.js/css/theme/blood.css +75 -56
- data/vendor/reveal.js/css/theme/league.css +69 -43
- data/vendor/reveal.js/css/theme/moon.css +69 -43
- data/vendor/reveal.js/css/theme/night.css +64 -38
- data/vendor/reveal.js/css/theme/serif.css +66 -40
- data/vendor/reveal.js/css/theme/simple.css +63 -37
- data/vendor/reveal.js/css/theme/sky.css +69 -43
- data/vendor/reveal.js/css/theme/solarized.css +69 -43
- data/vendor/reveal.js/css/theme/source/black.scss +1 -1
- data/vendor/reveal.js/css/theme/source/blood.scss +3 -15
- data/vendor/reveal.js/css/theme/source/white.scss +1 -1
- data/vendor/reveal.js/css/theme/template/theme.scss +30 -23
- data/vendor/reveal.js/css/theme/white.css +69 -43
- data/vendor/reveal.js/demo.html +410 -0
- data/vendor/reveal.js/index.html +13 -371
- data/vendor/reveal.js/js/reveal.js +643 -175
- data/vendor/reveal.js/lib/css/zenburn.css +41 -78
- data/vendor/reveal.js/lib/js/head.min.js +9 -8
- data/vendor/reveal.js/package.json +20 -24
- data/vendor/reveal.js/plugin/highlight/highlight.js +4 -3
- data/vendor/reveal.js/plugin/markdown/example.html +1 -1
- data/vendor/reveal.js/plugin/markdown/markdown.js +19 -7
- data/vendor/reveal.js/plugin/markdown/marked.js +2 -33
- data/vendor/reveal.js/plugin/math/math.js +5 -2
- data/vendor/reveal.js/plugin/multiplex/client.js +1 -1
- data/vendor/reveal.js/plugin/multiplex/index.js +24 -16
- data/vendor/reveal.js/plugin/multiplex/master.js +22 -42
- data/vendor/reveal.js/plugin/multiplex/package.json +19 -0
- data/vendor/reveal.js/plugin/notes/notes.html +11 -3
- data/vendor/reveal.js/plugin/notes/notes.js +19 -5
- data/vendor/reveal.js/plugin/notes-server/client.js +6 -1
- data/vendor/reveal.js/plugin/notes-server/index.js +17 -14
- data/vendor/reveal.js/plugin/notes-server/notes.html +17 -6
- data/vendor/reveal.js/plugin/print-pdf/print-pdf.js +1 -1
- data/vendor/reveal.js/plugin/zoom-js/zoom.js +1 -1
- data/vendor/reveal.js/test/examples/slide-backgrounds.html +1 -1
- data/vendor/reveal.js/test/examples/slide-transitions.html +101 -0
- data/vendor/reveal.js/test/test-markdown-element-attributes.html +3 -3
- data/vendor/reveal.js/test/test-markdown-element-attributes.js +1 -1
- data/vendor/reveal.js/test/test.html +5 -1
- data/vendor/reveal.js/test/test.js +26 -1
- metadata +11 -5
- data/vendor/reveal.js/plugin/leap/leap.js +0 -159
- data/vendor/reveal.js/plugin/remotes/remotes.js +0 -39
data/vendor/reveal.js/README.md
CHANGED
@@ -2,25 +2,94 @@
|
|
2
2
|
|
3
3
|
A framework for easily creating beautiful presentations using HTML. [Check out the live demo](http://lab.hakim.se/reveal-js/).
|
4
4
|
|
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).
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
- [
|
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).
|
6
|
+
|
7
|
+
## Table of contents
|
8
|
+
- [Online Editor](#online-editor)
|
9
|
+
- [Instructions](#instructions)
|
10
|
+
- [Markup](#markup)
|
11
|
+
- [Markdown](#markdown)
|
12
|
+
- [Element Attributes](#element-attributes)
|
13
|
+
- [Slide Attributes](#slide-attributes)
|
14
|
+
- [Configuration](#configuration)
|
15
|
+
- [Presentation Size](#presentation-size)
|
16
|
+
- [Dependencies](#dependencies)
|
17
|
+
- [Ready Event](#ready-event)
|
18
|
+
- [Auto-sliding](#auto-sliding)
|
19
|
+
- [Keyboard Bindings](#keyboard-bindings)
|
20
|
+
- [Touch Navigation](#touch-navigation)
|
21
|
+
- [Lazy Loading](#lazy-loading)
|
22
|
+
- [API](#api)
|
23
|
+
- [Slide Changed Event](#slide-changed-event)
|
24
|
+
- [Presentation State](#presentation-state)
|
25
|
+
- [Slide States](#slide-states)
|
26
|
+
- [Slide Backgrounds](#slide-backgrounds)
|
27
|
+
- [Parallax Background](#parallax-background)
|
28
|
+
- [Slide Transitions](#slide-transitions)
|
29
|
+
- [Internal links](#internal-links)
|
30
|
+
- [Fragments](#fragments)
|
31
|
+
- [Fragment events](#fragment-events)
|
32
|
+
- [Code syntax highlighting](#code-syntax-highlighting)
|
33
|
+
- [Slide number](#slide-number)
|
34
|
+
- [Overview mode](#overview-mode)
|
35
|
+
- [Fullscreen mode](#fullscreen-mode)
|
36
|
+
- [Embedded media](#embedded-media)
|
37
|
+
- [Stretching elements](#stretching-elements)
|
38
|
+
- [postMessage API](#postmessage-api)
|
39
|
+
- [PDF Export](#pdf-export)
|
40
|
+
- [Theming](#theming)
|
41
|
+
- [Speaker Notes](#speaker-notes)
|
42
|
+
- [Share and Print Speaker Notes](#share-and-print-speaker-notes)
|
43
|
+
- [Server Side Speaker Notes](#server-side-speaker-notes)
|
44
|
+
- [Multiplexing](#multiplexing)
|
45
|
+
- [Master presentation](#master-presentation)
|
46
|
+
- [Client presentation](#client-presentation)
|
47
|
+
- [Socket.io server](#socketio-server)
|
48
|
+
- [MathJax](#mathjax)
|
49
|
+
- [Installation](#installation)
|
50
|
+
- [Basic setup](#basic-setup)
|
51
|
+
- [Full setup](#full-setup)
|
52
|
+
- [Folder Structure](#folder-structure)
|
53
|
+
- [License](#license)
|
54
|
+
|
55
|
+
#### More reading
|
10
56
|
- [Changelog](https://github.com/hakimel/reveal.js/releases): Up-to-date version history.
|
11
57
|
- [Examples](https://github.com/hakimel/reveal.js/wiki/Example-Presentations): Presentations created with reveal.js, add your own!
|
12
58
|
- [Browser Support](https://github.com/hakimel/reveal.js/wiki/Browser-Support): Explanation of browser support and fallbacks.
|
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.
|
13
60
|
|
14
61
|
## Online Editor
|
15
62
|
|
16
|
-
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 [http://slides.com](http://slides.com).
|
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 [http://slides.com](http://slides.com?ref=github).
|
17
64
|
|
18
65
|
|
19
66
|
## Instructions
|
20
67
|
|
21
68
|
### Markup
|
22
69
|
|
23
|
-
|
70
|
+
Here's a barebones example of a fully working reveal.js presentation:
|
71
|
+
```html
|
72
|
+
<html>
|
73
|
+
<head>
|
74
|
+
<link rel="stylesheet" href="css/reveal.css">
|
75
|
+
<link rel="stylesheet" href="css/theme/white.css">
|
76
|
+
</head>
|
77
|
+
<body>
|
78
|
+
<div class="reveal">
|
79
|
+
<div class="slides">
|
80
|
+
<section>Slide 1</section>
|
81
|
+
<section>Slide 2</section>
|
82
|
+
</div>
|
83
|
+
</div>
|
84
|
+
<script src="js/reveal.js"></script>
|
85
|
+
<script>
|
86
|
+
Reveal.initialize();
|
87
|
+
</script>
|
88
|
+
</body>
|
89
|
+
</html>
|
90
|
+
```
|
91
|
+
|
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:
|
24
93
|
|
25
94
|
```html
|
26
95
|
<div class="reveal">
|
@@ -38,7 +107,7 @@ Markup hierarchy needs to be ``<div class="reveal"> <div class="slides"> <sectio
|
|
38
107
|
|
39
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 ```<script type="text/template">``` like the example below.
|
40
109
|
|
41
|
-
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 [
|
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).
|
42
111
|
|
43
112
|
```html
|
44
113
|
<section data-markdown>
|
@@ -129,6 +198,9 @@ Reveal.initialize({
|
|
129
198
|
// Change the presentation direction to be RTL
|
130
199
|
rtl: false,
|
131
200
|
|
201
|
+
// Randomizes the order of slides each time the presentation loads
|
202
|
+
shuffle: false,
|
203
|
+
|
132
204
|
// Turns fragments on and off globally
|
133
205
|
fragments: true,
|
134
206
|
|
@@ -140,6 +212,9 @@ Reveal.initialize({
|
|
140
212
|
// key is pressed
|
141
213
|
help: true,
|
142
214
|
|
215
|
+
// Flags if speaker notes should be visible to all viewers
|
216
|
+
showNotes: false,
|
217
|
+
|
143
218
|
// Number of milliseconds between automatically proceeding to the
|
144
219
|
// next slide, disabled when set to 0, this value can be overwritten
|
145
220
|
// by using a data-autoslide attribute on your slides
|
@@ -148,6 +223,9 @@ Reveal.initialize({
|
|
148
223
|
// Stop auto-sliding after user input
|
149
224
|
autoSlideStoppable: true,
|
150
225
|
|
226
|
+
// Use this method for navigation when auto-sliding
|
227
|
+
autoSlideMethod: Reveal.navigateNext,
|
228
|
+
|
151
229
|
// Enable slide navigation via mouse wheel
|
152
230
|
mouseWheel: false,
|
153
231
|
|
@@ -173,8 +251,13 @@ Reveal.initialize({
|
|
173
251
|
parallaxBackgroundImage: '', // e.g. "'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg'"
|
174
252
|
|
175
253
|
// Parallax background size
|
176
|
-
parallaxBackgroundSize: '' // CSS syntax, e.g. "2100px 900px"
|
254
|
+
parallaxBackgroundSize: '', // CSS syntax, e.g. "2100px 900px"
|
177
255
|
|
256
|
+
// Number of pixels to move the parallax background per slide
|
257
|
+
// - Calculated automatically unless specified
|
258
|
+
// - Set to 0 to disable movement along an axis
|
259
|
+
parallaxBackgroundHorizontal: null,
|
260
|
+
parallaxBackgroundVertical: null
|
178
261
|
|
179
262
|
});
|
180
263
|
```
|
@@ -191,6 +274,34 @@ Reveal.configure({ autoSlide: 5000 });
|
|
191
274
|
```
|
192
275
|
|
193
276
|
|
277
|
+
### Presentation Size
|
278
|
+
|
279
|
+
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.
|
280
|
+
|
281
|
+
See below for a list of configuration options related to sizing, including default values:
|
282
|
+
|
283
|
+
```javascript
|
284
|
+
Reveal.initialize({
|
285
|
+
|
286
|
+
...
|
287
|
+
|
288
|
+
// The "normal" size of the presentation, aspect ratio will be preserved
|
289
|
+
// when the presentation is scaled to fit different resolutions. Can be
|
290
|
+
// specified using percentage units.
|
291
|
+
width: 960,
|
292
|
+
height: 700,
|
293
|
+
|
294
|
+
// Factor of the display size that should remain empty around the content
|
295
|
+
margin: 0.1,
|
296
|
+
|
297
|
+
// Bounds for smallest/largest possible scale to apply to content
|
298
|
+
minScale: 0.2,
|
299
|
+
maxScale: 1.5
|
300
|
+
|
301
|
+
});
|
302
|
+
```
|
303
|
+
|
304
|
+
|
194
305
|
### Dependencies
|
195
306
|
|
196
307
|
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:
|
@@ -214,9 +325,6 @@ Reveal.initialize({
|
|
214
325
|
// Speaker notes
|
215
326
|
{ src: 'plugin/notes/notes.js', async: true },
|
216
327
|
|
217
|
-
// Remote control your reveal.js presentation using a touch device
|
218
|
-
{ src: 'plugin/remotes/remotes.js', async: true },
|
219
|
-
|
220
328
|
// MathJax
|
221
329
|
{ src: 'plugin/math/math.js', async: true }
|
222
330
|
]
|
@@ -241,37 +349,9 @@ Reveal.addEventListener( 'ready', function( event ) {
|
|
241
349
|
```
|
242
350
|
|
243
351
|
|
244
|
-
### Presentation Size
|
245
|
-
|
246
|
-
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.
|
247
|
-
|
248
|
-
See below for a list of configuration options related to sizing, including default values:
|
249
|
-
|
250
|
-
```javascript
|
251
|
-
Reveal.initialize({
|
252
|
-
|
253
|
-
...
|
254
|
-
|
255
|
-
// The "normal" size of the presentation, aspect ratio will be preserved
|
256
|
-
// when the presentation is scaled to fit different resolutions. Can be
|
257
|
-
// specified using percentage units.
|
258
|
-
width: 960,
|
259
|
-
height: 700,
|
260
|
-
|
261
|
-
// Factor of the display size that should remain empty around the content
|
262
|
-
margin: 0.1,
|
263
|
-
|
264
|
-
// Bounds for smallest/largest possible scale to apply to content
|
265
|
-
minScale: 0.2,
|
266
|
-
maxScale: 1.5
|
267
|
-
|
268
|
-
});
|
269
|
-
```
|
270
|
-
|
271
|
-
|
272
352
|
### Auto-sliding
|
273
353
|
|
274
|
-
Presentations can be
|
354
|
+
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:
|
275
355
|
|
276
356
|
```javascript
|
277
357
|
// Slide every five seconds
|
@@ -291,6 +371,8 @@ You can also override the slide duration for individual slides and fragments by
|
|
291
371
|
</section>
|
292
372
|
```
|
293
373
|
|
374
|
+
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```.
|
375
|
+
|
294
376
|
Whenever the auto-slide mode is resumed or paused the ```autoslideresumed``` and ```autoslidepaused``` events are fired.
|
295
377
|
|
296
378
|
|
@@ -308,16 +390,23 @@ Reveal.configure({
|
|
308
390
|
});
|
309
391
|
```
|
310
392
|
|
393
|
+
### Touch Navigation
|
394
|
+
|
395
|
+
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.
|
396
|
+
|
397
|
+
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.
|
398
|
+
|
399
|
+
|
311
400
|
### Lazy Loading
|
312
401
|
|
313
402
|
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.
|
314
403
|
|
315
|
-
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.
|
404
|
+
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.
|
316
405
|
|
317
406
|
```html
|
318
407
|
<section>
|
319
408
|
<img data-src="image.png">
|
320
|
-
<iframe data-src="http://
|
409
|
+
<iframe data-src="http://hakim.se"></iframe>
|
321
410
|
<video>
|
322
411
|
<source data-src="video.webm" type="video/webm" />
|
323
412
|
<source data-src="video.mp4" type="video/mp4" />
|
@@ -342,6 +431,9 @@ Reveal.next();
|
|
342
431
|
Reveal.prevFragment();
|
343
432
|
Reveal.nextFragment();
|
344
433
|
|
434
|
+
// Randomize the order of slides
|
435
|
+
Reveal.shuffle();
|
436
|
+
|
345
437
|
// Toggle presentation states, optionally pass true/false to force on/off
|
346
438
|
Reveal.toggleOverview();
|
347
439
|
Reveal.togglePause();
|
@@ -364,6 +456,9 @@ Reveal.getIndices(); // { h: 0, v: 0 } }
|
|
364
456
|
Reveal.getProgress(); // 0-1
|
365
457
|
Reveal.getTotalSlides();
|
366
458
|
|
459
|
+
// Returns the speaker notes for the current slide
|
460
|
+
Reveal.getSlideNotes();
|
461
|
+
|
367
462
|
// State checks
|
368
463
|
Reveal.isFirstSlide();
|
369
464
|
Reveal.isLastSlide();
|
@@ -374,7 +469,7 @@ Reveal.isAutoSliding();
|
|
374
469
|
|
375
470
|
### Slide Changed Event
|
376
471
|
|
377
|
-
|
472
|
+
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.
|
378
473
|
|
379
474
|
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.
|
380
475
|
|
@@ -427,8 +522,8 @@ Slides are contained within a limited portion of the screen by default to allow
|
|
427
522
|
<section data-background="http://example.com/image.png" data-background-size="100px" data-background-repeat="repeat">
|
428
523
|
<h2>This background image will be sized to 100px and repeated.</h2>
|
429
524
|
</section>
|
430
|
-
<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">
|
431
|
-
<h2>Video. Multiple sources can be defined using a comma separated list.</h2>
|
525
|
+
<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>
|
526
|
+
<h2>Video. Multiple sources can be defined using a comma separated list. Video will loop when the data-background-video-loop attribute is provided and can be muted with the data-background-video-muted attribute.</h2>
|
432
527
|
</section>
|
433
528
|
<section data-background-iframe="https://slides.com">
|
434
529
|
<h2>Embeds a web page as a background. Note that the page won't be interactive.</h2>
|
@@ -440,7 +535,7 @@ Backgrounds transition using a fade animation by default. This can be changed to
|
|
440
535
|
|
441
536
|
### Parallax Background
|
442
537
|
|
443
|
-
If you want to use a parallax scrolling background, set the two
|
538
|
+
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).
|
444
539
|
|
445
540
|
```javascript
|
446
541
|
Reveal.initialize({
|
@@ -451,8 +546,11 @@ Reveal.initialize({
|
|
451
546
|
// Parallax background size
|
452
547
|
parallaxBackgroundSize: '', // CSS syntax, e.g. "2100px 900px" - currently only pixels are supported (don't use % or auto)
|
453
548
|
|
454
|
-
//
|
455
|
-
|
549
|
+
// Number of pixels to move the parallax background per slide
|
550
|
+
// - Calculated automatically unless specified
|
551
|
+
// - Set to 0 to disable movement along an axis
|
552
|
+
parallaxBackgroundHorizontal: 200,
|
553
|
+
parallaxBackgroundVertical: 50
|
456
554
|
|
457
555
|
});
|
458
556
|
```
|
@@ -474,7 +572,25 @@ The global presentation transition is set using the ```transition``` config valu
|
|
474
572
|
</section>
|
475
573
|
```
|
476
574
|
|
477
|
-
|
575
|
+
You can also use different in and out transitions for the same slide:
|
576
|
+
|
577
|
+
```html
|
578
|
+
<section data-transition="slide">
|
579
|
+
The train goes on …
|
580
|
+
</section>
|
581
|
+
<section data-transition="slide">
|
582
|
+
and on …
|
583
|
+
</section>
|
584
|
+
<section data-transition="slide-in fade-out">
|
585
|
+
and stops.
|
586
|
+
</section>
|
587
|
+
<section data-transition="fade-in slide-out">
|
588
|
+
(Passengers entering and leaving)
|
589
|
+
</section>
|
590
|
+
<section data-transition="slide">
|
591
|
+
And it starts again.
|
592
|
+
</section>
|
593
|
+
```
|
478
594
|
|
479
595
|
|
480
596
|
### Internal links
|
@@ -507,8 +623,8 @@ The default fragment style is to start out invisible and fade in. This style can
|
|
507
623
|
<section>
|
508
624
|
<p class="fragment grow">grow</p>
|
509
625
|
<p class="fragment shrink">shrink</p>
|
510
|
-
<p class="fragment roll-in">roll-in</p>
|
511
626
|
<p class="fragment fade-out">fade-out</p>
|
627
|
+
<p class="fragment fade-up">fade-up (also down, left and right!)</p>
|
512
628
|
<p class="fragment current-visible">visible only once</p>
|
513
629
|
<p class="fragment highlight-current-blue">blue only once</p>
|
514
630
|
<p class="fragment highlight-red">highlight-red</p>
|
@@ -554,15 +670,15 @@ Reveal.addEventListener( 'fragmenthidden', function( event ) {
|
|
554
670
|
|
555
671
|
### Code syntax highlighting
|
556
672
|
|
557
|
-
By default, Reveal is configured with [highlight.js](
|
673
|
+
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.
|
558
674
|
|
559
675
|
```html
|
560
676
|
<section>
|
561
|
-
<pre><code data-trim>
|
677
|
+
<pre><code data-trim data-noescape>
|
562
678
|
(def lazy-fib
|
563
679
|
(concat
|
564
680
|
[0 1]
|
565
|
-
((fn rfib [a b]
|
681
|
+
<mark>((fn rfib [a b]</mark>
|
566
682
|
(lazy-cons (+ a b) (rfib b (+ a b)))) 0 1)))
|
567
683
|
</code></pre>
|
568
684
|
</section>
|
@@ -572,7 +688,16 @@ By default, Reveal is configured with [highlight.js](http://softwaremaniacs.org/
|
|
572
688
|
If you would like to display the page number of the current slide you can do so using the ```slideNumber``` configuration value.
|
573
689
|
|
574
690
|
```javascript
|
691
|
+
// Shows the slide number using default formatting
|
575
692
|
Reveal.configure({ slideNumber: true });
|
693
|
+
|
694
|
+
// Slide number formatting can be configured using these variables:
|
695
|
+
// "h.v": horizontal . vertical slide number (default)
|
696
|
+
// "h/v": horizontal / vertical slide number
|
697
|
+
// "c": flattened slide number
|
698
|
+
// "c/t": flattened slide number / total slides
|
699
|
+
Reveal.configure({ slideNumber: 'c/t' });
|
700
|
+
|
576
701
|
```
|
577
702
|
|
578
703
|
|
@@ -632,7 +757,7 @@ When reveal.js runs inside of an iframe it can optionally bubble all of its even
|
|
632
757
|
```javascript
|
633
758
|
window.addEventListener( 'message', function( event ) {
|
634
759
|
var data = JSON.parse( event.data );
|
635
|
-
if( data.namespace === 'reveal' && data.eventName
|
760
|
+
if( data.namespace === 'reveal' && data.eventName ==='slidechanged' ) {
|
636
761
|
// Slide changed, see data.state for slide number
|
637
762
|
}
|
638
763
|
} );
|
@@ -655,17 +780,20 @@ Reveal.initialize({
|
|
655
780
|
|
656
781
|
## PDF Export
|
657
782
|
|
658
|
-
Presentations can be exported to PDF via a special print stylesheet. This feature requires that you use [Google Chrome](http://google.com/chrome).
|
783
|
+
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).
|
659
784
|
Here's an example of an exported presentation that's been uploaded to SlideShare: http://www.slideshare.net/hakimel/revealjs-300.
|
660
785
|
|
661
786
|
1. Open your presentation with `print-pdf` included anywhere in the query string. This triggers the default index HTML to load the PDF print stylesheet ([css/print/pdf.css](https://github.com/hakimel/reveal.js/blob/master/css/print/pdf.css)). You can test this with [lab.hakim.se/reveal-js?print-pdf](http://lab.hakim.se/reveal-js?print-pdf).
|
662
|
-
2. Open the in-browser print dialog (CMD+P).
|
787
|
+
2. Open the in-browser print dialog (CTRL/CMD+P).
|
663
788
|
3. Change the **Destination** setting to **Save as PDF**.
|
664
789
|
4. Change the **Layout** to **Landscape**.
|
665
790
|
5. Change the **Margins** to **None**.
|
666
|
-
6.
|
791
|
+
6. Enable the **Background graphics** option.
|
792
|
+
7. Click **Save**.
|
667
793
|
|
668
|
-
![Chrome Print Settings](https://s3.amazonaws.com/hakim-static/reveal-js/pdf-print-settings.png)
|
794
|
+
![Chrome Print Settings](https://s3.amazonaws.com/hakim-static/reveal-js/pdf-print-settings-2.png)
|
795
|
+
|
796
|
+
Alternatively you can use the [decktape](https://github.com/astefanutti/decktape) project.
|
669
797
|
|
670
798
|
## Theming
|
671
799
|
|
@@ -675,7 +803,7 @@ The framework comes with a few different themes included:
|
|
675
803
|
- white: White background, black text, blue links
|
676
804
|
- league: Gray background, white text, blue links (default theme for reveal.js < 3.0.0)
|
677
805
|
- beige: Beige background, dark text, brown links
|
678
|
-
- sky: Blue background, thin
|
806
|
+
- sky: Blue background, thin dark text, blue links
|
679
807
|
- night: Black background, thick white text, orange links
|
680
808
|
- serif: Cappuccino background, gray text, brown links
|
681
809
|
- simple: White background, black text, blue links
|
@@ -696,6 +824,8 @@ reveal.js comes with a speaker notes plugin which can be used to present per-sli
|
|
696
824
|
|
697
825
|
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.
|
698
826
|
|
827
|
+
Alternatively you can add your notes in a `data-notes` attribute on the slide. Like `<section data-notes="Something important"></section>`.
|
828
|
+
|
699
829
|
When used locally, this feature requires that reveal.js [runs from a local web server](#full-setup).
|
700
830
|
|
701
831
|
```html
|
@@ -722,6 +852,12 @@ Note:
|
|
722
852
|
This will only display in the notes window.
|
723
853
|
```
|
724
854
|
|
855
|
+
#### Share and Print Speaker Notes
|
856
|
+
|
857
|
+
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.
|
858
|
+
|
859
|
+
When `showNotes` is enabled notes are also included when you [export to PDF](https://github.com/hakimel/reveal.js#pdf-export).
|
860
|
+
|
725
861
|
## Server Side Speaker Notes
|
726
862
|
|
727
863
|
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:
|
@@ -739,14 +875,14 @@ Reveal.initialize({
|
|
739
875
|
|
740
876
|
Then:
|
741
877
|
|
742
|
-
1. Install [Node.js](http://nodejs.org/)
|
878
|
+
1. Install [Node.js](http://nodejs.org/) (1.0.0 or later)
|
743
879
|
2. Run ```npm install```
|
744
880
|
3. Run ```node plugin/notes-server```
|
745
881
|
|
746
882
|
|
747
883
|
## Multiplexing
|
748
884
|
|
749
|
-
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 [
|
885
|
+
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/).
|
750
886
|
|
751
887
|
The multiplex plugin needs the following 3 things to operate:
|
752
888
|
|
@@ -757,7 +893,7 @@ The multiplex plugin needs the following 3 things to operate:
|
|
757
893
|
More details:
|
758
894
|
|
759
895
|
#### Master presentation
|
760
|
-
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:
|
896
|
+
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:
|
761
897
|
|
762
898
|
1. ```npm install node-static```
|
763
899
|
2. ```static```
|
@@ -775,12 +911,12 @@ Reveal.initialize({
|
|
775
911
|
// Example values. To generate your own, see the socket.io server instructions.
|
776
912
|
secret: '13652805320794272084', // Obtained from the socket.io server. Gives this (the master) control of the presentation
|
777
913
|
id: '1ea875674b17ca76', // Obtained from socket.io server
|
778
|
-
url: '
|
914
|
+
url: 'https://reveal-js-multiplex-ccjbegmaii.now.sh' // Location of socket.io server
|
779
915
|
},
|
780
916
|
|
781
917
|
// Don't forget to add the dependencies
|
782
918
|
dependencies: [
|
783
|
-
{ src: '//
|
919
|
+
{ src: '//cdn.socket.io/socket.io-1.3.5.js', async: true },
|
784
920
|
{ src: 'plugin/multiplex/master.js', async: true },
|
785
921
|
|
786
922
|
// and if you want speaker notes
|
@@ -803,12 +939,12 @@ Reveal.initialize({
|
|
803
939
|
// Example values. To generate your own, see the socket.io server instructions.
|
804
940
|
secret: null, // null so the clients do not have control of the master presentation
|
805
941
|
id: '1ea875674b17ca76', // id, obtained from socket.io server
|
806
|
-
url: '
|
942
|
+
url: 'https://reveal-js-multiplex-ccjbegmaii.now.sh' // Location of socket.io server
|
807
943
|
},
|
808
944
|
|
809
945
|
// Don't forget to add the dependencies
|
810
946
|
dependencies: [
|
811
|
-
{ src: '//
|
947
|
+
{ src: '//cdn.socket.io/socket.io-1.3.5.js', async: true },
|
812
948
|
{ src: 'plugin/multiplex/client.js', async: true }
|
813
949
|
|
814
950
|
// other dependencies...
|
@@ -822,15 +958,15 @@ Server that receives the slideChanged events from the master presentation and br
|
|
822
958
|
1. ```npm install```
|
823
959
|
2. ```node plugin/multiplex```
|
824
960
|
|
825
|
-
Or you use the socket.io server at [
|
961
|
+
Or you use the socket.io server at [https://reveal-js-multiplex-ccjbegmaii.now.sh/](https://reveal-js-multiplex-ccjbegmaii.now.sh/).
|
826
962
|
|
827
|
-
You'll need to generate a unique secret and token pair for your master and client presentations. To do so, visit ```http://example.com/token```, where ```http://example.com``` is the location of your socket.io server. Or if you're going to use the socket.io server at [
|
963
|
+
You'll need to generate a unique secret and token pair for your master and client presentations. To do so, visit ```http://example.com/token```, where ```http://example.com``` is the location of your socket.io server. Or if you're going to use the socket.io server at [https://reveal-js-multiplex-ccjbegmaii.now.sh/](https://reveal-js-multiplex-ccjbegmaii.now.sh/), visit [https://reveal-js-multiplex-ccjbegmaii.now.sh/token](https://reveal-js-multiplex-ccjbegmaii.now.sh/token).
|
828
964
|
|
829
|
-
You are very welcome to point your presentations at the Socket.io server running at [
|
965
|
+
You are very welcome to point your presentations at the Socket.io server running at [https://reveal-js-multiplex-ccjbegmaii.now.sh/](https://reveal-js-multiplex-ccjbegmaii.now.sh/), but availability and stability are not guaranteed. For anything mission critical I recommend you run your own server. It is simple to deploy to nodejitsu, heroku, your own environment, etc.
|
830
966
|
|
831
967
|
##### socket.io server as file static server
|
832
968
|
|
833
|
-
The socket.io server can play the role of static file server for your client presentation, as in the example at [
|
969
|
+
The socket.io server can play the role of static file server for your client presentation, as in the example at [https://reveal-js-multiplex-ccjbegmaii.now.sh/](https://reveal-js-multiplex-ccjbegmaii.now.sh/). (Open [https://reveal-js-multiplex-ccjbegmaii.now.sh/](https://reveal-js-multiplex-ccjbegmaii.now.sh/) in two browsers. Navigate through the slides on one, and the other will update to match.)
|
834
970
|
|
835
971
|
Example configuration:
|
836
972
|
```javascript
|
@@ -846,14 +982,14 @@ Reveal.initialize({
|
|
846
982
|
|
847
983
|
// Don't forget to add the dependencies
|
848
984
|
dependencies: [
|
849
|
-
{ src: '//
|
985
|
+
{ src: '//cdn.socket.io/socket.io-1.3.5.js', async: true },
|
850
986
|
{ src: 'plugin/multiplex/client.js', async: true }
|
851
987
|
|
852
988
|
// other dependencies...
|
853
989
|
]
|
854
990
|
```
|
855
991
|
|
856
|
-
It can also play the role of static file server for your master presentation and client presentations at the same time (as long as you don't want to use speaker notes). (Open [
|
992
|
+
It can also play the role of static file server for your master presentation and client presentations at the same time (as long as you don't want to use speaker notes). (Open [https://reveal-js-multiplex-ccjbegmaii.now.sh/](https://reveal-js-multiplex-ccjbegmaii.now.sh/) in two browsers. Navigate through the slides on one, and the other will update to match. Navigate through the slides on the second, and the first will update to match.) This is probably not desirable, because you don't want your audience to mess with your slides while you're presenting. ;)
|
857
993
|
|
858
994
|
Example configuration:
|
859
995
|
```javascript
|
@@ -869,7 +1005,7 @@ Reveal.initialize({
|
|
869
1005
|
|
870
1006
|
// Don't forget to add the dependencies
|
871
1007
|
dependencies: [
|
872
|
-
{ src: '//
|
1008
|
+
{ src: '//cdn.socket.io/socket.io-1.3.5.js', async: true },
|
873
1009
|
{ src: 'plugin/multiplex/master.js', async: true },
|
874
1010
|
{ src: 'plugin/multiplex/client.js', async: true }
|
875
1011
|
|
@@ -878,56 +1014,11 @@ Reveal.initialize({
|
|
878
1014
|
});
|
879
1015
|
```
|
880
1016
|
|
881
|
-
## Leap Motion
|
882
|
-
The Leap Motion plugin lets you utilize your [Leap Motion](https://www.leapmotion.com/) device to control basic navigation of your presentation. The gestures currently supported are:
|
883
|
-
|
884
|
-
##### 1 to 2 fingers
|
885
|
-
Pointer — Point to anything on screen. Move your finger past the device to expand the pointer.
|
886
|
-
|
887
|
-
##### 1 hand + 3 or more fingers (left/right/up/down)
|
888
|
-
Navigate through your slides. See config options to invert movements.
|
889
|
-
|
890
|
-
##### 2 hands upwards
|
891
|
-
Toggle the overview mode. Do it a second time to exit the overview.
|
892
|
-
|
893
|
-
#### Config Options
|
894
|
-
You can edit the following options:
|
895
|
-
|
896
|
-
| Property | Default | Description
|
897
|
-
| ----------------- |:-----------------:| :-------------
|
898
|
-
| autoCenter | true | Center the pointer based on where you put your finger into the leap motions detection field.
|
899
|
-
| gestureDelay | 500 | How long to delay between gestures in milliseconds.
|
900
|
-
| naturalSwipe | true | Swipe as though you were touching a touch screen. Set to false to invert.
|
901
|
-
| pointerColor | #00aaff | The color of the pointer.
|
902
|
-
| pointerOpacity | 0.7 | The opacity of the pointer.
|
903
|
-
| pointerSize | 15 | The minimum height and width of the pointer.
|
904
|
-
| pointerTolerance | 120 | Bigger = slower pointer.
|
905
|
-
|
906
|
-
|
907
|
-
Example configuration:
|
908
|
-
```js
|
909
|
-
Reveal.initialize({
|
910
|
-
|
911
|
-
// other options...
|
912
|
-
|
913
|
-
leap: {
|
914
|
-
naturalSwipe : false, // Invert swipe gestures
|
915
|
-
pointerOpacity : 0.5, // Set pointer opacity to 0.5
|
916
|
-
pointerColor : '#d80000' // Red pointer
|
917
|
-
},
|
918
|
-
|
919
|
-
dependencies: [
|
920
|
-
{ src: 'plugin/leap/leap.js', async: true }
|
921
|
-
]
|
922
|
-
|
923
|
-
});
|
924
|
-
```
|
925
|
-
|
926
1017
|
## MathJax
|
927
1018
|
|
928
1019
|
If you want to display math equations in your presentation you can easily do so by including this plugin. The plugin is a very thin wrapper around the [MathJax](http://www.mathjax.org/) library. To use it you'll need to include it as a reveal.js dependency, [find our more about dependencies here](#dependencies).
|
929
1020
|
|
930
|
-
The plugin defaults to using [LaTeX](http://en.wikipedia.org/wiki/LaTeX) but that can be adjusted through the ```math``` configuration object. Note that MathJax is loaded from a remote server. If you want to use it offline you'll need to download a copy of the library and adjust the ```mathjax``` configuration value.
|
1021
|
+
The plugin defaults to using [LaTeX](http://en.wikipedia.org/wiki/LaTeX) but that can be adjusted through the ```math``` configuration object. Note that MathJax is loaded from a remote server. If you want to use it offline you'll need to download a copy of the library and adjust the ```mathjax``` configuration value.
|
931
1022
|
|
932
1023
|
Below is an example of how the plugin can be configured. If you don't intend to change these values you do not need to include the ```math``` config object at all.
|
933
1024
|
|
@@ -937,10 +1028,10 @@ Reveal.initialize({
|
|
937
1028
|
// other options ...
|
938
1029
|
|
939
1030
|
math: {
|
940
|
-
mathjax: '
|
1031
|
+
mathjax: 'https://cdn.mathjax.org/mathjax/latest/MathJax.js',
|
941
1032
|
config: 'TeX-AMS_HTML-full' // See http://docs.mathjax.org/en/latest/config-files.html
|
942
1033
|
},
|
943
|
-
|
1034
|
+
|
944
1035
|
dependencies: [
|
945
1036
|
{ src: 'plugin/math/math.js', async: true }
|
946
1037
|
]
|
@@ -970,7 +1061,7 @@ The core of reveal.js is very easy to install. You'll simply need to download a
|
|
970
1061
|
|
971
1062
|
Some reveal.js features, like external Markdown and speaker notes, require that presentations run from a local web server. The following instructions will set up such a server as well as all of the development tasks needed to make edits to the reveal.js source code.
|
972
1063
|
|
973
|
-
1. Install [Node.js](http://nodejs.org/)
|
1064
|
+
1. Install [Node.js](http://nodejs.org/) (1.0.0 or later)
|
974
1065
|
|
975
1066
|
2. Install [Grunt](http://gruntjs.com/getting-started#installing-the-cli)
|
976
1067
|
|
@@ -1010,4 +1101,4 @@ Some reveal.js features, like external Markdown and speaker notes, require that
|
|
1010
1101
|
|
1011
1102
|
MIT licensed
|
1012
1103
|
|
1013
|
-
Copyright (C)
|
1104
|
+
Copyright (C) 2016 Hakim El Hattab, http://hakim.se
|