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.
- checksums.yaml +4 -4
- data/files/reveal.js/Gruntfile.js +41 -40
- data/files/reveal.js/LICENSE +1 -1
- data/files/reveal.js/README.md +189 -107
- data/files/reveal.js/bower.json +2 -2
- data/files/reveal.js/css/print/pdf.css +10 -18
- data/files/reveal.js/css/reveal.css +344 -140
- data/files/reveal.js/css/reveal.scss +371 -76
- data/files/reveal.js/css/theme/README.md +2 -2
- data/files/reveal.js/css/theme/beige.css +19 -38
- data/files/reveal.js/css/theme/black.css +19 -38
- data/files/reveal.js/css/theme/blood.css +19 -38
- data/files/reveal.js/css/theme/league.css +19 -38
- data/files/reveal.js/css/theme/moon.css +19 -38
- data/files/reveal.js/css/theme/night.css +19 -38
- data/files/reveal.js/css/theme/serif.css +19 -38
- data/files/reveal.js/css/theme/simple.css +19 -38
- data/files/reveal.js/css/theme/sky.css +19 -38
- data/files/reveal.js/css/theme/solarized.css +19 -38
- data/files/reveal.js/css/theme/template/theme.scss +18 -45
- data/files/reveal.js/css/theme/white.css +19 -38
- data/files/reveal.js/demo.html +13 -7
- data/files/reveal.js/js/reveal.js +707 -242
- data/files/reveal.js/lib/js/head.min.js +1 -4
- data/files/reveal.js/package.json +16 -17
- data/files/reveal.js/plugin/highlight/highlight.js +3 -4
- data/files/reveal.js/plugin/markdown/example.html +7 -0
- data/files/reveal.js/plugin/markdown/example.md +5 -0
- data/files/reveal.js/plugin/markdown/markdown.js +1 -1
- data/files/reveal.js/plugin/math/math.js +4 -4
- data/files/reveal.js/plugin/multiplex/master.js +4 -1
- data/files/reveal.js/plugin/multiplex/package.json +1 -1
- data/files/reveal.js/plugin/notes/notes.html +48 -2
- data/files/reveal.js/plugin/notes/notes.js +9 -17
- data/files/reveal.js/plugin/print-pdf/print-pdf.js +9 -11
- data/files/reveal.js/plugin/search/search.js +127 -117
- data/files/reveal.js/plugin/zoom-js/zoom.js +16 -32
- data/files/reveal.js/test/qunit-2.5.0.css +436 -0
- data/files/reveal.js/test/qunit-2.5.0.js +5188 -0
- data/files/reveal.js/test/test-markdown-element-attributes.html +2 -2
- data/files/reveal.js/test/test-markdown-element-attributes.js +21 -23
- data/files/reveal.js/test/test-markdown-external.html +3 -3
- data/files/reveal.js/test/test-markdown-external.js +7 -11
- data/files/reveal.js/test/test-markdown-options.html +2 -2
- data/files/reveal.js/test/test-markdown-options.js +7 -6
- data/files/reveal.js/test/test-markdown-slide-attributes.html +2 -2
- data/files/reveal.js/test/test-markdown-slide-attributes.js +23 -26
- data/files/reveal.js/test/test-markdown.html +2 -2
- data/files/reveal.js/test/test-markdown.js +2 -6
- data/files/reveal.js/test/test-pdf.html +2 -2
- data/files/reveal.js/test/test-pdf.js +2 -5
- data/files/reveal.js/test/test.html +2 -2
- data/files/reveal.js/test/test.js +184 -188
- data/lib/reveal-ck/version.rb +1 -1
- metadata +4 -4
- data/files/reveal.js/test/qunit-1.12.0.css +0 -244
- 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:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 94f1e9761ec12005539ccf53866dc6e570e21c13
|
4
|
+
data.tar.gz: 99ac3d5e821c7735bb6ec639bdf76226794463d5
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
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://
|
15
|
+
' * http://revealjs.com\n' +
|
16
16
|
' * MIT licensed\n' +
|
17
17
|
' *\n' +
|
18
|
-
' * Copyright (C)
|
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
|
-
|
39
|
-
|
40
|
-
}
|
39
|
+
src: 'css/reveal.scss',
|
40
|
+
dest: 'css/reveal.css'
|
41
41
|
},
|
42
42
|
themes: {
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
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
|
-
|
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
|
-
|
64
|
-
|
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:
|
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
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
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-
|
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' ] );
|
data/files/reveal.js/LICENSE
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
Copyright (C)
|
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
|
data/files/reveal.js/README.md
CHANGED
@@ -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://
|
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
|
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 (
|
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 (
|
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
|
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
|
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
|
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
|
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
|
-
|
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
|
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
|
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
|
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
|
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.
|
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(); //
|
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
|
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
|
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
|
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
|
-
|
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
|
574
|
-
|
|
575
|
-
| data-background-image
|
576
|
-
| data-background-size
|
577
|
-
| data-background-position
|
578
|
-
| data-background-repeat
|
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
|
592
|
-
| :---------------------------
|
593
|
-
| data-background-video
|
594
|
-
| data-background-video-loop
|
595
|
-
| data-background-video-muted
|
596
|
-
| data-background-size
|
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
|
-
|
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
|
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://
|
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¶llaxBackgroundSize=2100px%20900px).
|
641
703
|
|
642
704
|
### Slide Transitions
|
643
|
-
|
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 (
|
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
|
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
|
-
|
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
|
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
|
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.
|
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
|
-
|
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
|
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.
|
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
|
-
|
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
|
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
|
-
|
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
|
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
|
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
|
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`
|
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
|
1003
|
-
3. Run
|
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.
|
1022
|
-
2.
|
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
|
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
|
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
|
-
|
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
|
-
|
1082
|
-
|
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
|
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
|
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
|
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)
|
1309
|
+
Copyright (C) 2018 Hakim El Hattab, http://hakim.se
|