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.
Files changed (75) hide show
  1. checksums.yaml +4 -4
  2. data/.ruby-version +1 -1
  3. data/Gemfile +1 -1
  4. data/README.md +2 -2
  5. data/lib/slide_hero/blockquote.rb +10 -0
  6. data/lib/slide_hero/pluggable.rb +4 -4
  7. data/lib/slide_hero/plugins.rb +0 -1
  8. data/lib/slide_hero/presentation.rb +3 -3
  9. data/lib/slide_hero/slide.rb +2 -2
  10. data/lib/slide_hero/version.rb +1 -1
  11. data/lib/slide_hero/views/blockquote.html.erb +3 -0
  12. data/lib/slide_hero.rb +1 -0
  13. data/test/slide_hero/blockquote_spec.rb +13 -0
  14. data/test/slide_hero/plugins_spec.rb +0 -1
  15. data/test/slide_hero/presentation_spec.rb +2 -1
  16. data/test/slide_hero/slide_spec.rb +14 -3
  17. data/test/slide_hero_spec.rb +1 -0
  18. data/vendor/reveal.js/.gitignore +6 -1
  19. data/vendor/reveal.js/.travis.yml +1 -1
  20. data/vendor/reveal.js/CONTRIBUTING.md +4 -0
  21. data/vendor/reveal.js/Gruntfile.js +26 -24
  22. data/vendor/reveal.js/LICENSE +1 -1
  23. data/vendor/reveal.js/README.md +215 -124
  24. data/vendor/reveal.js/bower.json +27 -0
  25. data/vendor/reveal.js/css/print/paper.css +1 -1
  26. data/vendor/reveal.js/css/print/pdf.css +30 -27
  27. data/vendor/reveal.js/css/reveal.css +381 -191
  28. data/vendor/reveal.js/css/reveal.scss +259 -164
  29. data/vendor/reveal.js/css/theme/README.md +2 -6
  30. data/vendor/reveal.js/css/theme/beige.css +75 -49
  31. data/vendor/reveal.js/css/theme/black.css +64 -38
  32. data/vendor/reveal.js/css/theme/blood.css +75 -56
  33. data/vendor/reveal.js/css/theme/league.css +69 -43
  34. data/vendor/reveal.js/css/theme/moon.css +69 -43
  35. data/vendor/reveal.js/css/theme/night.css +64 -38
  36. data/vendor/reveal.js/css/theme/serif.css +66 -40
  37. data/vendor/reveal.js/css/theme/simple.css +63 -37
  38. data/vendor/reveal.js/css/theme/sky.css +69 -43
  39. data/vendor/reveal.js/css/theme/solarized.css +69 -43
  40. data/vendor/reveal.js/css/theme/source/black.scss +1 -1
  41. data/vendor/reveal.js/css/theme/source/blood.scss +3 -15
  42. data/vendor/reveal.js/css/theme/source/white.scss +1 -1
  43. data/vendor/reveal.js/css/theme/template/theme.scss +30 -23
  44. data/vendor/reveal.js/css/theme/white.css +69 -43
  45. data/vendor/reveal.js/demo.html +410 -0
  46. data/vendor/reveal.js/index.html +13 -371
  47. data/vendor/reveal.js/js/reveal.js +643 -175
  48. data/vendor/reveal.js/lib/css/zenburn.css +41 -78
  49. data/vendor/reveal.js/lib/js/head.min.js +9 -8
  50. data/vendor/reveal.js/package.json +20 -24
  51. data/vendor/reveal.js/plugin/highlight/highlight.js +4 -3
  52. data/vendor/reveal.js/plugin/markdown/example.html +1 -1
  53. data/vendor/reveal.js/plugin/markdown/markdown.js +19 -7
  54. data/vendor/reveal.js/plugin/markdown/marked.js +2 -33
  55. data/vendor/reveal.js/plugin/math/math.js +5 -2
  56. data/vendor/reveal.js/plugin/multiplex/client.js +1 -1
  57. data/vendor/reveal.js/plugin/multiplex/index.js +24 -16
  58. data/vendor/reveal.js/plugin/multiplex/master.js +22 -42
  59. data/vendor/reveal.js/plugin/multiplex/package.json +19 -0
  60. data/vendor/reveal.js/plugin/notes/notes.html +11 -3
  61. data/vendor/reveal.js/plugin/notes/notes.js +19 -5
  62. data/vendor/reveal.js/plugin/notes-server/client.js +6 -1
  63. data/vendor/reveal.js/plugin/notes-server/index.js +17 -14
  64. data/vendor/reveal.js/plugin/notes-server/notes.html +17 -6
  65. data/vendor/reveal.js/plugin/print-pdf/print-pdf.js +1 -1
  66. data/vendor/reveal.js/plugin/zoom-js/zoom.js +1 -1
  67. data/vendor/reveal.js/test/examples/slide-backgrounds.html +1 -1
  68. data/vendor/reveal.js/test/examples/slide-transitions.html +101 -0
  69. data/vendor/reveal.js/test/test-markdown-element-attributes.html +3 -3
  70. data/vendor/reveal.js/test/test-markdown-element-attributes.js +1 -1
  71. data/vendor/reveal.js/test/test.html +5 -1
  72. data/vendor/reveal.js/test/test.js +26 -1
  73. metadata +11 -5
  74. data/vendor/reveal.js/plugin/leap/leap.js +0 -159
  75. data/vendor/reveal.js/plugin/remotes/remotes.js +0 -39
@@ -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). It's best viewed in a modern browser but [fallbacks](https://github.com/hakimel/reveal.js/wiki/Browser-Support) are available to make sure your presentation can still be viewed elsewhere.
6
-
7
-
8
- #### More reading:
9
- - [Installation](#installation): Step-by-step instructions for getting reveal.js running on your computer.
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
- Markup hierarchy needs to be ``<div class="reveal"> <div class="slides"> <section>`` where the ``<section>`` represents one slide and can be repeated indefinitely. If you place multiple ``<section>``'s 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 it will be included in the horizontal sequence. For example:
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 [Github Flavoured Markdown](https://help.github.com/articles/github-flavored-markdown). Sensitive to indentation (avoid mixing tabs and spaces) and line breaks (avoid consecutive breaks).
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 configure 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:
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://slides.com"></iframe>
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
- An 'slidechanged' event is fired each time the slide is changed (regardless of state). The event object holds the index values of the current slide as well as a reference to the previous and current slide HTML nodes.
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 following config properties when initializing reveal.js (the third one is optional).
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
- // This slide transition gives best results:
455
- transition: 'slide'
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
- Note that this does not work with the page and cube transitions.
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](http://softwaremaniacs.org/soft/highlight/en/) 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.
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 ='slidechanged' ) {
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. Click **Save**.
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 white text, blue links
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 [http://revealjs.jit.su/](http://revealjs.jit.su).
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: 'revealjs.jit.su:80' // Location of socket.io server
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: '//cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.16/socket.io.min.js', async: true },
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: 'revealjs.jit.su:80' // Location of socket.io server
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: '//cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.16/socket.io.min.js', async: true },
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 [http://revealjs.jit.su](http://revealjs.jit.su).
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 [http://revealjs.jit.su](http://revealjs.jit.su), visit [http://revealjs.jit.su/token](http://revealjs.jit.su/token).
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 [http://revealjs.jit.su](http://revealjs.jit.su), 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.
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 [http://revealjs.jit.su](http://revealjs.jit.su). (Open [http://revealjs.jit.su](http://revealjs.jit.su) in two browsers. Navigate through the slides on one, and the other will update to match.)
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: '//cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.16/socket.io.min.js', async: true },
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 [http://revealjs.jit.su](http://revealjs.jit.su) 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. ;)
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: '//cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.16/socket.io.min.js', async: true },
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 &mdash; 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: 'http://cdn.mathjax.org/mathjax/latest/MathJax.js',
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) 2015 Hakim El Hattab, http://hakim.se
1104
+ Copyright (C) 2016 Hakim El Hattab, http://hakim.se