reveal-ck 3.8.1 → 3.9.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (57) hide show
  1. checksums.yaml +4 -4
  2. data/files/reveal.js/Gruntfile.js +41 -40
  3. data/files/reveal.js/LICENSE +1 -1
  4. data/files/reveal.js/README.md +189 -107
  5. data/files/reveal.js/bower.json +2 -2
  6. data/files/reveal.js/css/print/pdf.css +10 -18
  7. data/files/reveal.js/css/reveal.css +344 -140
  8. data/files/reveal.js/css/reveal.scss +371 -76
  9. data/files/reveal.js/css/theme/README.md +2 -2
  10. data/files/reveal.js/css/theme/beige.css +19 -38
  11. data/files/reveal.js/css/theme/black.css +19 -38
  12. data/files/reveal.js/css/theme/blood.css +19 -38
  13. data/files/reveal.js/css/theme/league.css +19 -38
  14. data/files/reveal.js/css/theme/moon.css +19 -38
  15. data/files/reveal.js/css/theme/night.css +19 -38
  16. data/files/reveal.js/css/theme/serif.css +19 -38
  17. data/files/reveal.js/css/theme/simple.css +19 -38
  18. data/files/reveal.js/css/theme/sky.css +19 -38
  19. data/files/reveal.js/css/theme/solarized.css +19 -38
  20. data/files/reveal.js/css/theme/template/theme.scss +18 -45
  21. data/files/reveal.js/css/theme/white.css +19 -38
  22. data/files/reveal.js/demo.html +13 -7
  23. data/files/reveal.js/js/reveal.js +707 -242
  24. data/files/reveal.js/lib/js/head.min.js +1 -4
  25. data/files/reveal.js/package.json +16 -17
  26. data/files/reveal.js/plugin/highlight/highlight.js +3 -4
  27. data/files/reveal.js/plugin/markdown/example.html +7 -0
  28. data/files/reveal.js/plugin/markdown/example.md +5 -0
  29. data/files/reveal.js/plugin/markdown/markdown.js +1 -1
  30. data/files/reveal.js/plugin/math/math.js +4 -4
  31. data/files/reveal.js/plugin/multiplex/master.js +4 -1
  32. data/files/reveal.js/plugin/multiplex/package.json +1 -1
  33. data/files/reveal.js/plugin/notes/notes.html +48 -2
  34. data/files/reveal.js/plugin/notes/notes.js +9 -17
  35. data/files/reveal.js/plugin/print-pdf/print-pdf.js +9 -11
  36. data/files/reveal.js/plugin/search/search.js +127 -117
  37. data/files/reveal.js/plugin/zoom-js/zoom.js +16 -32
  38. data/files/reveal.js/test/qunit-2.5.0.css +436 -0
  39. data/files/reveal.js/test/qunit-2.5.0.js +5188 -0
  40. data/files/reveal.js/test/test-markdown-element-attributes.html +2 -2
  41. data/files/reveal.js/test/test-markdown-element-attributes.js +21 -23
  42. data/files/reveal.js/test/test-markdown-external.html +3 -3
  43. data/files/reveal.js/test/test-markdown-external.js +7 -11
  44. data/files/reveal.js/test/test-markdown-options.html +2 -2
  45. data/files/reveal.js/test/test-markdown-options.js +7 -6
  46. data/files/reveal.js/test/test-markdown-slide-attributes.html +2 -2
  47. data/files/reveal.js/test/test-markdown-slide-attributes.js +23 -26
  48. data/files/reveal.js/test/test-markdown.html +2 -2
  49. data/files/reveal.js/test/test-markdown.js +2 -6
  50. data/files/reveal.js/test/test-pdf.html +2 -2
  51. data/files/reveal.js/test/test-pdf.js +2 -5
  52. data/files/reveal.js/test/test.html +2 -2
  53. data/files/reveal.js/test/test.js +184 -188
  54. data/lib/reveal-ck/version.rb +1 -1
  55. metadata +4 -4
  56. data/files/reveal.js/test/qunit-1.12.0.css +0 -244
  57. data/files/reveal.js/test/qunit-1.12.0.js +0 -2212
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 71a1d84e87f7d90d983969acc461206956378fa6
4
- data.tar.gz: 9e2c6a050d513145d664127bfeee4cb647ee1249
3
+ metadata.gz: 94f1e9761ec12005539ccf53866dc6e570e21c13
4
+ data.tar.gz: 99ac3d5e821c7735bb6ec639bdf76226794463d5
5
5
  SHA512:
6
- metadata.gz: 3c7e1a590ad149b22e7da4872e2bf3d349a4a283c5bffa0667246710a60012120db19c1bef759652b3b0479be981d835764082e5c887efcd1b9a0f6cde35e8cd
7
- data.tar.gz: b2572cf14ccb8f3ec8efe10a520621a070e59b9aa2d86a6bacb57809cd35b85e4ba685d2ce08900975a757425d6325982ef0746574805675e8fb92f81aa68534
6
+ metadata.gz: 5930a4ecd366ba7027fdb6b8fc4e440db8ade2c3f67d39433f5f2dde74ef386e047e833b3cc2660510abc70348dda9e6ae1d65e0760e5ddb13093c7b8774312b
7
+ data.tar.gz: 8d98525d33b97953d142b2d7d0e08b9c67f0d186837bace22c6be5cd252832646e82a84cf8c05f7d7e5a18a2dc6f6e568ff4f81f7363f4d207e86424bcb0309a
@@ -12,10 +12,10 @@ module.exports = function(grunt) {
12
12
  banner:
13
13
  '/*!\n' +
14
14
  ' * reveal.js <%= pkg.version %> (<%= grunt.template.today("yyyy-mm-dd, HH:MM") %>)\n' +
15
- ' * http://lab.hakim.se/reveal-js\n' +
15
+ ' * http://revealjs.com\n' +
16
16
  ' * MIT licensed\n' +
17
17
  ' *\n' +
18
- ' * Copyright (C) 2017 Hakim El Hattab, http://hakim.se\n' +
18
+ ' * Copyright (C) 2018 Hakim El Hattab, http://hakim.se\n' +
19
19
  ' */'
20
20
  },
21
21
 
@@ -25,7 +25,8 @@ module.exports = function(grunt) {
25
25
 
26
26
  uglify: {
27
27
  options: {
28
- banner: '<%= meta.banner %>\n'
28
+ banner: '<%= meta.banner %>\n',
29
+ ie8: true
29
30
  },
30
31
  build: {
31
32
  src: 'js/reveal.js',
@@ -35,34 +36,31 @@ module.exports = function(grunt) {
35
36
 
36
37
  sass: {
37
38
  core: {
38
- files: {
39
- 'css/reveal.css': 'css/reveal.scss',
40
- }
39
+ src: 'css/reveal.scss',
40
+ dest: 'css/reveal.css'
41
41
  },
42
42
  themes: {
43
- files: [
44
- {
45
- expand: true,
46
- cwd: 'css/theme/source',
47
- src: ['*.sass', '*.scss'],
48
- dest: 'css/theme',
49
- ext: '.css'
50
- }
51
- ]
43
+ expand: true,
44
+ cwd: 'css/theme/source',
45
+ src: ['*.sass', '*.scss'],
46
+ dest: 'css/theme',
47
+ ext: '.css'
52
48
  }
53
49
  },
54
50
 
55
51
  autoprefixer: {
56
- dist: {
52
+ core: {
57
53
  src: 'css/reveal.css'
58
54
  }
59
55
  },
60
56
 
61
57
  cssmin: {
58
+ options: {
59
+ compatibility: 'ie9'
60
+ },
62
61
  compress: {
63
- files: {
64
- 'css/reveal.min.css': [ 'css/reveal.css' ]
65
- }
62
+ src: 'css/reveal.css',
63
+ dest: 'css/reveal.min.css'
66
64
  }
67
65
  },
68
66
 
@@ -72,7 +70,7 @@ module.exports = function(grunt) {
72
70
  eqeqeq: true,
73
71
  immed: true,
74
72
  esnext: true,
75
- latedef: true,
73
+ latedef: 'nofunc',
76
74
  newcap: true,
77
75
  noarg: true,
78
76
  sub: true,
@@ -80,6 +78,7 @@ module.exports = function(grunt) {
80
78
  eqnull: true,
81
79
  browser: true,
82
80
  expr: true,
81
+ loopfunc: true,
83
82
  globals: {
84
83
  head: false,
85
84
  module: false,
@@ -98,22 +97,25 @@ module.exports = function(grunt) {
98
97
  port: port,
99
98
  base: root,
100
99
  livereload: true,
101
- open: true
100
+ open: true,
101
+ useAvailablePort: true
102
102
  }
103
- },
104
-
103
+ }
105
104
  },
106
105
 
107
106
  zip: {
108
- 'reveal-js-presentation.zip': [
109
- 'index.html',
110
- 'css/**',
111
- 'js/**',
112
- 'lib/**',
113
- 'images/**',
114
- 'plugin/**',
115
- '**.md'
116
- ]
107
+ bundle: {
108
+ src: [
109
+ 'index.html',
110
+ 'css/**',
111
+ 'js/**',
112
+ 'lib/**',
113
+ 'images/**',
114
+ 'plugin/**',
115
+ '**.md'
116
+ ],
117
+ dest: 'reveal-js-presentation.zip'
118
+ }
117
119
  },
118
120
 
119
121
  watch: {
@@ -146,24 +148,23 @@ module.exports = function(grunt) {
146
148
  },
147
149
 
148
150
  retire: {
149
- js: ['js/reveal.js', 'lib/js/*.js', 'plugin/**/*.js'],
150
- node: ['.'],
151
- options: {}
151
+ js: [ 'js/reveal.js', 'lib/js/*.js', 'plugin/**/*.js' ],
152
+ node: [ '.' ]
152
153
  }
153
154
 
154
155
  });
155
156
 
156
157
  // Dependencies
157
- grunt.loadNpmTasks( 'grunt-contrib-qunit' );
158
- grunt.loadNpmTasks( 'grunt-contrib-jshint' );
158
+ grunt.loadNpmTasks( 'grunt-contrib-connect' );
159
159
  grunt.loadNpmTasks( 'grunt-contrib-cssmin' );
160
+ grunt.loadNpmTasks( 'grunt-contrib-jshint' );
161
+ grunt.loadNpmTasks( 'grunt-contrib-qunit' );
160
162
  grunt.loadNpmTasks( 'grunt-contrib-uglify' );
161
163
  grunt.loadNpmTasks( 'grunt-contrib-watch' );
162
- grunt.loadNpmTasks( 'grunt-sass' );
163
- grunt.loadNpmTasks( 'grunt-contrib-connect' );
164
164
  grunt.loadNpmTasks( 'grunt-autoprefixer' );
165
- grunt.loadNpmTasks( 'grunt-zip' );
166
165
  grunt.loadNpmTasks( 'grunt-retire' );
166
+ grunt.loadNpmTasks( 'grunt-sass' );
167
+ grunt.loadNpmTasks( 'grunt-zip' );
167
168
 
168
169
  // Default task
169
170
  grunt.registerTask( 'default', [ 'css', 'js' ] );
@@ -1,4 +1,4 @@
1
- Copyright (C) 2017 Hakim El Hattab, http://hakim.se, and reveal.js contributors
1
+ Copyright (C) 2018 Hakim El Hattab, http://hakim.se, and reveal.js contributors
2
2
 
3
3
  Permission is hereby granted, free of charge, to any person obtaining a copy
4
4
  of this software and associated documentation files (the "Software"), to deal
@@ -1,10 +1,12 @@
1
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
2
 
3
- A framework for easily creating beautiful presentations using HTML. [Check out the live demo](http://lab.hakim.se/reveal-js/).
3
+ A framework for easily creating beautiful presentations using HTML. [Check out the live demo](http://revealjs.com/).
4
4
 
5
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).
6
6
 
7
+
7
8
  ## Table of contents
9
+
8
10
  - [Online Editor](#online-editor)
9
11
  - [Instructions](#instructions)
10
12
  - [Markup](#markup)
@@ -53,11 +55,13 @@ reveal.js comes with a broad range of features including [nested slides](https:/
53
55
  - [License](#license)
54
56
 
55
57
  #### More reading
58
+
56
59
  - [Changelog](https://github.com/hakimel/reveal.js/releases): Up-to-date version history.
57
60
  - [Examples](https://github.com/hakimel/reveal.js/wiki/Example-Presentations): Presentations created with reveal.js, add your own!
58
61
  - [Browser Support](https://github.com/hakimel/reveal.js/wiki/Browser-Support): Explanation of browser support and fallbacks.
59
62
  - [Plugins](https://github.com/hakimel/reveal.js/wiki/Plugins,-Tools-and-Hardware): A list of plugins that can be used to extend reveal.js.
60
63
 
64
+
61
65
  ## Online Editor
62
66
 
63
67
  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).
@@ -105,7 +109,7 @@ The presentation markup hierarchy needs to be `.reveal > .slides > section` wher
105
109
 
106
110
  ### Markdown
107
111
 
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.
112
+ 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. You'll also need to add the `plugin/markdown/marked.js` and `plugin/markdown/markdown.js` scripts (in that order) to your HTML file.
109
113
 
110
114
  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).
111
115
 
@@ -121,22 +125,26 @@ This is based on [data-markdown](https://gist.github.com/1343518) from [Paul Iri
121
125
 
122
126
  #### External Markdown
123
127
 
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.
128
+ 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 `notes?:`, so it will match both "note:" and "notes:"). The `data-charset` attribute is optional and specifies which charset to use when loading the external file.
125
129
 
126
130
  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
131
 
128
132
  ```html
129
- <section data-markdown="example.md"
130
- data-separator="^\n\n\n"
131
- data-separator-vertical="^\n\n"
132
- data-separator-notes="^Note:"
133
+ <section data-markdown="example.md"
134
+ data-separator="^\n\n\n"
135
+ data-separator-vertical="^\n\n"
136
+ data-separator-notes="^Note:"
133
137
  data-charset="iso-8859-15">
138
+ <!--
139
+ Note that Windows uses `\r\n` instead of `\n` as its linefeed character.
140
+ For a regex that supports all operating systems, use `\r?\n` instead of `\n`.
141
+ -->
134
142
  </section>
135
143
  ```
136
144
 
137
145
  #### Element Attributes
138
146
 
139
- Special syntax (in html comment) is available for adding attributes to Markdown elements. This is useful for fragments, amongst other things.
147
+ Special syntax (through HTML comments) is available for adding attributes to Markdown elements. This is useful for fragments, amongst other things.
140
148
 
141
149
  ```html
142
150
  <section data-markdown>
@@ -149,7 +157,7 @@ Special syntax (in html comment) is available for adding attributes to Markdown
149
157
 
150
158
  #### Slide Attributes
151
159
 
152
- Special syntax (in html comment) is available for adding attributes to the slide `<section>` elements generated by your Markdown.
160
+ Special syntax (through HTML comments) is available for adding attributes to the slide `<section>` elements generated by your Markdown.
153
161
 
154
162
  ```html
155
163
  <section data-markdown>
@@ -176,20 +184,28 @@ Reveal.initialize({
176
184
 
177
185
  ### Configuration
178
186
 
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.
187
+ At the end of your page you need to initialize reveal by running the following code. Note that all configuration values are optional and will default to the values specified below.
180
188
 
181
189
  ```javascript
182
190
  Reveal.initialize({
183
191
 
184
- // Display controls in the bottom right corner
192
+ // Display presentation control arrows
185
193
  controls: true,
186
194
 
195
+ // Help the user learn the controls by providing hints, for example by
196
+ // bouncing the down arrow when they first encounter a vertical slide
197
+ controlsTutorial: true,
198
+
199
+ // Determines where controls appear, "edges" or "bottom-right"
200
+ controlsLayout: 'bottom-right',
201
+
202
+ // Visibility rule for backwards navigation arrows; "faded", "hidden"
203
+ // or "visible"
204
+ controlsBackArrows: 'faded',
205
+
187
206
  // Display a presentation progress bar
188
207
  progress: true,
189
208
 
190
- // Set default timing of 2 minutes per slide
191
- defaultTiming: 120,
192
-
193
209
  // Display the page number of the current slide
194
210
  slideNumber: false,
195
211
 
@@ -220,6 +236,10 @@ Reveal.initialize({
220
236
  // Turns fragments on and off globally
221
237
  fragments: true,
222
238
 
239
+ // Flags whether to include the current fragment in the URL,
240
+ // so that reloading brings you to the same fragment position
241
+ fragmentInURL: false,
242
+
223
243
  // Flags if the presentation is running in an embedded mode,
224
244
  // i.e. contained within a limited portion of the screen
225
245
  embedded: false,
@@ -231,7 +251,7 @@ Reveal.initialize({
231
251
  // Flags if speaker notes should be visible to all viewers
232
252
  showNotes: false,
233
253
 
234
- // Global override for autolaying embedded media (video/audio/iframe)
254
+ // Global override for autoplaying embedded media (video/audio/iframe)
235
255
  // - null: Media will only autoplay if data-autoplay is present
236
256
  // - true: All media will autoplay, regardless of individual setting
237
257
  // - false: No media will autoplay, regardless of individual setting
@@ -248,6 +268,11 @@ Reveal.initialize({
248
268
  // Use this method for navigation when auto-sliding
249
269
  autoSlideMethod: Reveal.navigateNext,
250
270
 
271
+ // Specify the average time in seconds that you think you will spend
272
+ // presenting each slide. This is used to show a pacing timer in the
273
+ // speaker view
274
+ defaultTiming: 120,
275
+
251
276
  // Enable slide navigation via mouse wheel
252
277
  mouseWheel: false,
253
278
 
@@ -255,6 +280,8 @@ Reveal.initialize({
255
280
  hideAddressBar: true,
256
281
 
257
282
  // Opens links in an iframe preview overlay
283
+ // Add `data-preview-link` and `data-preview-link="false"` to customise each link
284
+ // individually
258
285
  previewLinks: false,
259
286
 
260
287
  // Transition style
@@ -287,8 +314,7 @@ Reveal.initialize({
287
314
  });
288
315
  ```
289
316
 
290
-
291
- The configuration can be updated after initialization using the ```configure``` method:
317
+ The configuration can be updated after initialization using the `configure` method:
292
318
 
293
319
  ```javascript
294
320
  // Turn autoSlide off
@@ -298,17 +324,16 @@ Reveal.configure({ autoSlide: 0 });
298
324
  Reveal.configure({ autoSlide: 5000 });
299
325
  ```
300
326
 
301
-
302
327
  ### Presentation Size
303
328
 
304
- 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.
329
+ 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.
305
330
 
306
331
  See below for a list of configuration options related to sizing, including default values:
307
332
 
308
333
  ```javascript
309
334
  Reveal.initialize({
310
335
 
311
- ...
336
+ // ...
312
337
 
313
338
  // The "normal" size of the presentation, aspect ratio will be preserved
314
339
  // when the presentation is scaled to fit different resolutions. Can be
@@ -331,7 +356,7 @@ If you wish to disable this behavior and do your own scaling (e.g. using media q
331
356
  ```javascript
332
357
  Reveal.initialize({
333
358
 
334
- ...
359
+ // ...
335
360
 
336
361
  width: "100%",
337
362
  height: "100%",
@@ -380,7 +405,7 @@ To load these dependencies, reveal.js requires [head.js](http://headjs.com/) *(a
380
405
 
381
406
  ### Ready Event
382
407
 
383
- 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()`.
408
+ 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()`.
384
409
 
385
410
  ```javascript
386
411
  Reveal.addEventListener( 'ready', function( event ) {
@@ -400,9 +425,10 @@ Reveal.configure({
400
425
  autoSlide: 5000
401
426
  });
402
427
  ```
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
428
 
405
- You can also override the slide duration for individual slides and fragments by using the ```data-autoslide``` attribute:
429
+ 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.
430
+
431
+ You can also override the slide duration for individual slides and fragments by using the `data-autoslide` attribute:
406
432
 
407
433
  ```html
408
434
  <section data-autoslide="2000">
@@ -412,14 +438,13 @@ You can also override the slide duration for individual slides and fragments by
412
438
  </section>
413
439
  ```
414
440
 
415
- 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```.
416
-
417
- Whenever the auto-slide mode is resumed or paused the ```autoslideresumed``` and ```autoslidepaused``` events are fired.
441
+ 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`.
418
442
 
443
+ Whenever the auto-slide mode is resumed or paused the `autoslideresumed` and `autoslidepaused` events are fired.
419
444
 
420
445
  ### Keyboard Bindings
421
446
 
422
- If you're unhappy with any of the default keyboard bindings you can override them using the ```keyboard``` config option:
447
+ If you're unhappy with any of the default keyboard bindings you can override them using the `keyboard` config option:
423
448
 
424
449
  ```javascript
425
450
  Reveal.configure({
@@ -437,12 +462,11 @@ You can swipe to navigate through a presentation on any touch-enabled device. Ho
437
462
 
438
463
  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.
439
464
 
440
-
441
465
  ### Lazy Loading
442
466
 
443
467
  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.
444
468
 
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.
469
+ 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.
446
470
 
447
471
  ```html
448
472
  <section>
@@ -455,10 +479,9 @@ To enable lazy loading all you need to do is change your "src" attributes to "da
455
479
  </section>
456
480
  ```
457
481
 
458
-
459
482
  ### API
460
483
 
461
- The ``Reveal`` object exposes a JavaScript API for controlling navigation and reading state:
484
+ The `Reveal` object exposes a JavaScript API for controlling navigation and reading state:
462
485
 
463
486
  ```javascript
464
487
  // Navigation
@@ -497,11 +520,11 @@ Reveal.getScale();
497
520
  Reveal.getPreviousSlide();
498
521
  Reveal.getCurrentSlide();
499
522
 
500
- Reveal.getIndices(); // { h: 0, v: 0 } }
501
- Reveal.getPastSlideCount();
523
+ Reveal.getIndices(); // { h: 0, v: 0, f: 0 }
524
+ Reveal.getSlidePastCount();
502
525
  Reveal.getProgress(); // (0 == first slide, 1 == last slide)
503
526
  Reveal.getSlides(); // Array of all slides
504
- Reveal.getTotalSlides(); // total number of slides
527
+ Reveal.getTotalSlides(); // Total number of slides
505
528
 
506
529
  // Returns the speaker notes for the current slide
507
530
  Reveal.getSlideNotes();
@@ -514,9 +537,40 @@ Reveal.isPaused();
514
537
  Reveal.isAutoSliding();
515
538
  ```
516
539
 
540
+ ### Custom Key Bindings
541
+
542
+ Custom key bindings can be added and removed using the following Javascript API. Custom key bindings will override the default keyboard bindings, but will in turn be overridden by the user defined bindings in the ``keyboard`` config option.
543
+
544
+ ```javascript
545
+ Reveal.addKeyBinding( binding, callback );
546
+ Reveal.removeKeyBinding( keyCode );
547
+ ```
548
+
549
+ For example
550
+
551
+ ```javascript
552
+ // The binding parameter provides the following properties
553
+ // keyCode: the keycode for binding to the callback
554
+ // key: the key label to show in the help overlay
555
+ // description: the description of the action to show in the help overlay
556
+ Reveal.addKeyBinding( { keyCode: 84, key: 'T', description: 'Start timer' }, function() {
557
+ // start timer
558
+ } )
559
+
560
+ // The binding parameter can also be a direct keycode without providing the help description
561
+ Reveal.addKeyBinding( 82, function() {
562
+ // reset timer
563
+ } )
564
+ ```
565
+
566
+ This allows plugins to add key bindings directly to Reveal so they can
567
+
568
+ * make use of Reveal's pre-processing logic for key handling (for example, ignoring key presses when paused); and
569
+ * be included in the help overlay (optional)
570
+
517
571
  ### Slide Changed Event
518
572
 
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.
573
+ 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
574
 
521
575
  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.
522
576
 
@@ -545,7 +599,7 @@ Reveal.setState( state );
545
599
 
546
600
  ### Slide States
547
601
 
548
- 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.
602
+ 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.
549
603
 
550
604
  Furthermore you can also listen to these changes in state via JavaScript:
551
605
 
@@ -557,10 +611,12 @@ Reveal.addEventListener( 'somestate', function() {
557
611
 
558
612
  ### Slide Backgrounds
559
613
 
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.
614
+ 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
615
 
562
616
  #### Color Backgrounds
563
- All CSS color formats are supported, like rgba() or hsl().
617
+
618
+ All CSS color formats are supported, including hex values, keywords, `rgba()` or `hsl()`.
619
+
564
620
  ```html
565
621
  <section data-background-color="#ff0000">
566
622
  <h2>Color</h2>
@@ -568,14 +624,17 @@ All CSS color formats are supported, like rgba() or hsl().
568
624
  ```
569
625
 
570
626
  #### Image Backgrounds
627
+
571
628
  By default, background images are resized to cover the full page. Available options:
572
629
 
573
- | Attribute | Default | Description |
574
- | :--------------------------- | :--------- | :---------- |
575
- | data-background-image | | URL of the image to show. GIFs restart when the slide opens. |
576
- | data-background-size | cover | See [background-size](https://developer.mozilla.org/docs/Web/CSS/background-size) on MDN. |
577
- | data-background-position | center | See [background-position](https://developer.mozilla.org/docs/Web/CSS/background-position) on MDN. |
578
- | data-background-repeat | no-repeat | See [background-repeat](https://developer.mozilla.org/docs/Web/CSS/background-repeat) on MDN. |
630
+ | Attribute | Default | Description |
631
+ | :------------------------------- | :--------- | :---------- |
632
+ | data-background-image | | URL of the image to show. GIFs restart when the slide opens. |
633
+ | data-background-size | cover | See [background-size](https://developer.mozilla.org/docs/Web/CSS/background-size) on MDN. |
634
+ | data-background-position | center | See [background-position](https://developer.mozilla.org/docs/Web/CSS/background-position) on MDN. |
635
+ | data-background-repeat | no-repeat | See [background-repeat](https://developer.mozilla.org/docs/Web/CSS/background-repeat) on MDN. |
636
+ | data-background-opacity | 1 | Opacity of the background image on a 0-1 scale. 0 is transparent and 1 is fully opaque. |
637
+
579
638
  ```html
580
639
  <section data-background-image="http://example.com/image.png">
581
640
  <h2>Image</h2>
@@ -586,14 +645,16 @@ By default, background images are resized to cover the full page. Available opti
586
645
  ```
587
646
 
588
647
  #### Video Backgrounds
648
+
589
649
  Automatically plays a full size video behind the slide.
590
650
 
591
- | Attribute | Default | Description |
592
- | :--------------------------- | :------ | :---------- |
593
- | data-background-video | | A single video source, or a comma separated list of video sources. |
594
- | data-background-video-loop | false | Flags if the video should play repeatedly. |
595
- | 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. |
651
+ | Attribute | Default | Description |
652
+ | :--------------------------- | :------ | :---------- |
653
+ | data-background-video | | A single video source, or a comma separated list of video sources. |
654
+ | data-background-video-loop | false | Flags if the video should play repeatedly. |
655
+ | data-background-video-muted | false | Flags if the audio should be muted. |
656
+ | data-background-size | cover | Use `cover` for full screen and some cropping or `contain` for letterboxing. |
657
+ | data-background-opacity | 1 | Opacity of the background video on a 0-1 scale. 0 is transparent and 1 is fully opaque. |
597
658
 
598
659
  ```html
599
660
  <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>
@@ -602,7 +663,9 @@ Automatically plays a full size video behind the slide.
602
663
  ```
603
664
 
604
665
  #### Iframe Backgrounds
666
+
605
667
  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.
668
+
606
669
  ```html
607
670
  <section data-background-iframe="https://slides.com" data-background-interactive>
608
671
  <h2>Iframe</h2>
@@ -610,12 +673,13 @@ Embeds a web page as a slide background that covers 100% of the reveal.js width
610
673
  ```
611
674
 
612
675
  #### 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.
676
+
677
+ 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
678
 
615
679
 
616
680
  ### Parallax Background
617
681
 
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).
682
+ If you want to use a parallax scrolling background, set the first two properties below when initializing reveal.js (the other two are optional).
619
683
 
620
684
  ```javascript
621
685
  Reveal.initialize({
@@ -635,12 +699,11 @@ Reveal.initialize({
635
699
  });
636
700
  ```
637
701
 
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
-
702
+ Make sure that the background size is much bigger than screen size to allow for some scrolling. [View example](http://revealjs.com/?parallaxBackgroundImage=https%3A%2F%2Fs3.amazonaws.com%2Fhakim-static%2Freveal-js%2Freveal-parallax-1.jpg&parallaxBackgroundSize=2100px%20900px).
641
703
 
642
704
  ### Slide Transitions
643
- 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:
705
+
706
+ 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:
644
707
 
645
708
  ```html
646
709
  <section data-transition="zoom">
@@ -671,18 +734,17 @@ You can also use different in and out transitions for the same slide:
671
734
  And it starts again.
672
735
  </section>
673
736
  ```
674
-
675
-
737
+ You can choose from `none`, `fade`, `slide`, `convex`, `concave` and `zoom`.
676
738
  ### Internal links
677
739
 
678
- 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">```):
740
+ 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">`):
679
741
 
680
742
  ```html
681
743
  <a href="#/2/2">Link</a>
682
744
  <a href="#/some-slide">Link</a>
683
745
  ```
684
746
 
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.
747
+ 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
748
 
687
749
  ```html
688
750
  <a href="#" class="navigate-left">
@@ -693,9 +755,9 @@ You can also add relative navigation links, similar to the built in reveal.js co
693
755
  <a href="#" class="navigate-next"> <!-- Next vertical or horizontal slide -->
694
756
  ```
695
757
 
696
-
697
758
  ### 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
759
+
760
+ 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://revealjs.com/#/fragments
699
761
 
700
762
  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:
701
763
 
@@ -705,7 +767,8 @@ The default fragment style is to start out invisible and fade in. This style can
705
767
  <p class="fragment shrink">shrink</p>
706
768
  <p class="fragment fade-out">fade-out</p>
707
769
  <p class="fragment fade-up">fade-up (also down, left and right!)</p>
708
- <p class="fragment current-visible">visible only once</p>
770
+ <p class="fragment fade-in-then-out">fades in, then out when we move to the next step</p>
771
+ <p class="fragment fade-in-then-semi-out">fades in, then obfuscate when we move to the next step</p>
709
772
  <p class="fragment highlight-current-blue">blue only once</p>
710
773
  <p class="fragment highlight-red">highlight-red</p>
711
774
  <p class="fragment highlight-green">highlight-green</p>
@@ -723,7 +786,7 @@ Multiple fragments can be applied to the same element sequentially by wrapping i
723
786
  </section>
724
787
  ```
725
788
 
726
- The display order of fragments can be controlled using the ```data-fragment-index``` attribute.
789
+ The display order of fragments can be controlled using the `data-fragment-index` attribute.
727
790
 
728
791
  ```html
729
792
  <section>
@@ -750,7 +813,18 @@ Reveal.addEventListener( 'fragmenthidden', function( event ) {
750
813
 
751
814
  ### Code syntax highlighting
752
815
 
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.
816
+ By default, Reveal is configured with [highlight.js](https://highlightjs.org/) for code syntax highlighting. To enable syntax highlighting, you'll have to load the highlight plugin ([plugin/highlight/highlight.js](plugin/highlight/highlight.js)) and a highlight.js CSS theme (Reveal comes packaged with the zenburn theme: [lib/css/zenburn.css](lib/css/zenburn.css)).
817
+
818
+ ```javascript
819
+ Reveal.initialize({
820
+ // More info https://github.com/hakimel/reveal.js#dependencies
821
+ dependencies: [
822
+ { src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
823
+ ]
824
+ });
825
+ ```
826
+
827
+ 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
828
 
755
829
  ```html
756
830
  <section>
@@ -765,7 +839,8 @@ By default, Reveal is configured with [highlight.js](https://highlightjs.org/) f
765
839
  ```
766
840
 
767
841
  ### 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.
842
+
843
+ 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
844
 
770
845
  ```javascript
771
846
  // Shows the slide number using default formatting
@@ -783,13 +858,11 @@ Reveal.configure({ slideNumber: 'c/t' });
783
858
  // "speaker": only show slide numbers on speaker notes view
784
859
  // "print": only show slide numbers when printing to PDF
785
860
  Reveal.configure({ showSlideNumber: 'speaker' });
786
-
787
861
  ```
788
862
 
789
-
790
863
  ### Overview mode
791
864
 
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,
865
+ 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
866
  as if you were at 1,000 feet above your presentation. The overview mode comes with a few API hooks:
794
867
 
795
868
  ```javascript
@@ -800,12 +873,12 @@ Reveal.addEventListener( 'overviewhidden', function( event ) { /* ... */ } );
800
873
  Reveal.toggleOverview();
801
874
  ```
802
875
 
803
-
804
876
  ### Fullscreen mode
805
- Just press »F« on your keyboard to show your presentation in fullscreen mode. Press the »ESC« key to exit fullscreen mode.
806
877
 
878
+ Just press »F« on your keyboard to show your presentation in fullscreen mode. Press the »ESC« key to exit fullscreen mode.
807
879
 
808
880
  ### Embedded media
881
+
809
882
  Add `data-autoplay` to your media element if you want it to automatically start playing when the slide is shown:
810
883
 
811
884
  ```html
@@ -816,14 +889,13 @@ If you want to enable or disable autoplay globally, for all embedded media, you
816
889
 
817
890
  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.
818
891
 
819
-
820
892
  ### Embedded iframes
821
893
 
822
- 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
-
894
+ 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.
824
895
 
825
896
  ### Stretching elements
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:
897
+
898
+ 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:
827
899
 
828
900
  ```html
829
901
  <section>
@@ -836,8 +908,8 @@ Limitations:
836
908
  - Only direct descendants of a slide section can be stretched
837
909
  - Only one descendant per slide section can be stretched
838
910
 
839
-
840
911
  ### postMessage API
912
+
841
913
  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:
842
914
 
843
915
  ```javascript
@@ -859,7 +931,7 @@ This cross-window messaging can be toggled on or off using configuration flags.
859
931
 
860
932
  ```javascript
861
933
  Reveal.initialize({
862
- ...,
934
+ // ...
863
935
 
864
936
  // Exposes the reveal.js API through window.postMessage
865
937
  postMessage: true,
@@ -872,13 +944,20 @@ Reveal.initialize({
872
944
 
873
945
  ## PDF Export
874
946
 
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 presention from a webserver.
947
+ 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.
876
948
  Here's an example of an exported presentation that's been uploaded to SlideShare: http://www.slideshare.net/hakimel/revealjs-300.
877
949
 
950
+ ### Separate pages for fragments
951
+ [Fragments](#fragments) are printed on separate slides by default. Meaning if you have a slide with three fragment steps, it will generate three separate slides where the fragments appear incrementally.
952
+
953
+ If you prefer printing all fragments in their visible states on the same slide you can set the `pdfSeparateFragments` config option to false.
954
+
878
955
  ### Page size
956
+
879
957
  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
958
 
881
959
  ### Print stylesheet
960
+
882
961
  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:
883
962
 
884
963
  ```html
@@ -892,7 +971,8 @@ To enable the PDF print capability in your presentation, the special print style
892
971
  ```
893
972
 
894
973
  ### 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).
974
+
975
+ 1. Open your presentation with `print-pdf` included in the query string i.e. http://localhost:8000/?print-pdf. You can test this with [revealjs.com?print-pdf](http://revealjs.com?print-pdf).
896
976
  * 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
897
977
  1. Open the in-browser print dialog (CTRL/CMD+P).
898
978
  1. Change the **Destination** setting to **Save as PDF**.
@@ -905,6 +985,7 @@ To enable the PDF print capability in your presentation, the special print style
905
985
 
906
986
  Alternatively you can use the [decktape](https://github.com/astefanutti/decktape) project.
907
987
 
988
+
908
989
  ## Theming
909
990
 
910
991
  The framework comes with a few different themes included:
@@ -930,11 +1011,11 @@ If you want to add a theme of your own see the instructions here: [/css/theme/RE
930
1011
 
931
1012
  ## Speaker Notes
932
1013
 
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.
1014
+ 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
1015
 
935
1016
  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.
936
1017
 
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.
1018
+ 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
1019
 
939
1020
  Alternatively you can add your notes in a `data-notes` attribute on the slide. Like `<section data-notes="Something important"></section>`.
940
1021
 
@@ -945,7 +1026,7 @@ When used locally, this feature requires that reveal.js [runs from a local web s
945
1026
  <h2>Some Slide</h2>
946
1027
 
947
1028
  <aside class="notes">
948
- 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).
1029
+ 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).
949
1030
  </aside>
950
1031
  </section>
951
1032
  ```
@@ -966,7 +1047,7 @@ This will only display in the notes window.
966
1047
 
967
1048
  #### Share and Print Speaker Notes
968
1049
 
969
- 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.
1050
+ 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` configuration value set to `true`. Notes will appear along the bottom of the presentations.
970
1051
 
971
1052
  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
1053
 
@@ -987,7 +1068,7 @@ In some cases it can be desirable to run notes on a separate device from the one
987
1068
 
988
1069
  ```javascript
989
1070
  Reveal.initialize({
990
- ...
1071
+ // ...
991
1072
 
992
1073
  dependencies: [
993
1074
  { src: 'socket.io/socket.io.js', async: true },
@@ -999,8 +1080,8 @@ Reveal.initialize({
999
1080
  Then:
1000
1081
 
1001
1082
  1. Install [Node.js](http://nodejs.org/) (4.0.0 or later)
1002
- 2. Run ```npm install```
1003
- 3. Run ```node plugin/notes-server```
1083
+ 2. Run `npm install`
1084
+ 3. Run `node plugin/notes-server`
1004
1085
 
1005
1086
 
1006
1087
  ## Multiplexing
@@ -1013,19 +1094,19 @@ The multiplex plugin needs the following 3 things to operate:
1013
1094
  2. Client presentations that follow the master
1014
1095
  3. Socket.io server to broadcast events from the master to the clients
1015
1096
 
1016
- More details:
1017
-
1018
1097
  #### Master presentation
1098
+
1019
1099
  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
1100
 
1021
- 1. ```npm install node-static```
1022
- 2. ```static```
1101
+ 1. `npm install node-static`
1102
+ 2. `static`
1023
1103
 
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.
1104
+ 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
1105
 
1026
- You can then access your master presentation at ```http://localhost:1947```
1106
+ You can then access your master presentation at `http://localhost:1947`
1027
1107
 
1028
1108
  Example configuration:
1109
+
1029
1110
  ```javascript
1030
1111
  Reveal.initialize({
1031
1112
  // other options...
@@ -1051,9 +1132,11 @@ Reveal.initialize({
1051
1132
  ```
1052
1133
 
1053
1134
  #### Client presentation
1054
- Served from a publicly accessible static file server. Examples include: GitHub Pages, Amazon S3, Dreamhost, Akamai, etc. The more reliable, the better. Your audience can then access the client presentation via ```http://example.com/path/to/presentation/client/index.html```, with the configuration below causing them to connect to the socket.io server as clients.
1135
+
1136
+ Served from a publicly accessible static file server. Examples include: GitHub Pages, Amazon S3, Dreamhost, Akamai, etc. The more reliable, the better. Your audience can then access the client presentation via `http://example.com/path/to/presentation/client/index.html`, with the configuration below causing them to connect to the socket.io server as clients.
1055
1137
 
1056
1138
  Example configuration:
1139
+
1057
1140
  ```javascript
1058
1141
  Reveal.initialize({
1059
1142
  // other options...
@@ -1076,14 +1159,15 @@ Reveal.initialize({
1076
1159
  ```
1077
1160
 
1078
1161
  #### Socket.io server
1079
- Server that receives the slideChanged events from the master presentation and broadcasts them out to the connected client presentations. This needs to be publicly accessible. You can run your own socket.io server with the commands:
1080
1162
 
1081
- 1. ```npm install```
1082
- 2. ```node plugin/multiplex```
1163
+ Server that receives the `slideChanged` events from the master presentation and broadcasts them out to the connected client presentations. This needs to be publicly accessible. You can run your own socket.io server with the commands:
1164
+
1165
+ 1. `npm install`
1166
+ 2. `node plugin/multiplex`
1083
1167
 
1084
1168
  Or you can use the socket.io server at [https://reveal-js-multiplex-ccjbegmaii.now.sh/](https://reveal-js-multiplex-ccjbegmaii.now.sh/).
1085
1169
 
1086
- 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).
1170
+ 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).
1087
1171
 
1088
1172
  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.
1089
1173
 
@@ -1094,6 +1178,7 @@ For anything mission critical I recommend you run your own server. The easiest w
1094
1178
  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.)
1095
1179
 
1096
1180
  Example configuration:
1181
+
1097
1182
  ```javascript
1098
1183
  Reveal.initialize({
1099
1184
  // other options...
@@ -1117,6 +1202,7 @@ Reveal.initialize({
1117
1202
  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. ;)
1118
1203
 
1119
1204
  Example configuration:
1205
+
1120
1206
  ```javascript
1121
1207
  Reveal.initialize({
1122
1208
  // other options...
@@ -1139,17 +1225,17 @@ Reveal.initialize({
1139
1225
  });
1140
1226
  ```
1141
1227
 
1228
+
1142
1229
  ## MathJax
1143
1230
 
1144
1231
  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).
1145
1232
 
1146
- 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.
1233
+ 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.
1147
1234
 
1148
- 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.
1235
+ 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.
1149
1236
 
1150
1237
  ```js
1151
1238
  Reveal.initialize({
1152
-
1153
1239
  // other options ...
1154
1240
 
1155
1241
  math: {
@@ -1160,7 +1246,6 @@ Reveal.initialize({
1160
1246
  dependencies: [
1161
1247
  { src: 'plugin/math/math.js', async: true }
1162
1248
  ]
1163
-
1164
1249
  });
1165
1250
  ```
1166
1251
 
@@ -1176,12 +1261,9 @@ The **basic setup** is for authoring presentations only. The **full setup** give
1176
1261
  The core of reveal.js is very easy to install. You'll simply need to download a copy of this repository and open the index.html file directly in your browser.
1177
1262
 
1178
1263
  1. Download the latest version of reveal.js from <https://github.com/hakimel/reveal.js/releases>
1179
-
1180
1264
  2. Unzip and replace the example contents in index.html with your own
1181
-
1182
1265
  3. Open index.html in a browser to view it
1183
1266
 
1184
-
1185
1267
  ### Full setup
1186
1268
 
1187
1269
  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.
@@ -1212,8 +1294,8 @@ Some reveal.js features, like external Markdown and speaker notes, require that
1212
1294
 
1213
1295
  You can change the port by using `npm start -- --port=8001`.
1214
1296
 
1215
-
1216
1297
  ### Folder Structure
1298
+
1217
1299
  - **css/** Core styles without which the project does not function
1218
1300
  - **js/** Like above but for JavaScript
1219
1301
  - **plugin/** Components that have been developed as extensions to reveal.js
@@ -1224,4 +1306,4 @@ Some reveal.js features, like external Markdown and speaker notes, require that
1224
1306
 
1225
1307
  MIT licensed
1226
1308
 
1227
- Copyright (C) 2017 Hakim El Hattab, http://hakim.se
1309
+ Copyright (C) 2018 Hakim El Hattab, http://hakim.se