slide_hero 0.0.8 → 0.0.9
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/.ruby-version +1 -1
- data/README.md +1 -1
- data/lib/slide_hero/version.rb +1 -1
- data/lib/slide_hero/views/layout.html.erb +2 -2
- data/vendor/reveal.js/.gitignore +3 -1
- data/vendor/reveal.js/.travis.yml +1 -1
- data/vendor/reveal.js/CONTRIBUTING.md +19 -0
- data/vendor/reveal.js/Gruntfile.js +58 -21
- data/vendor/reveal.js/LICENSE +1 -1
- data/vendor/reveal.js/README.md +154 -74
- data/vendor/reveal.js/css/print/paper.css +193 -167
- data/vendor/reveal.js/css/print/pdf.css +20 -53
- data/vendor/reveal.js/css/reveal.css +912 -1651
- data/vendor/reveal.js/css/reveal.scss +1316 -0
- data/vendor/reveal.js/css/theme/README.md +1 -1
- data/vendor/reveal.js/css/theme/beige.css +177 -60
- data/vendor/reveal.js/css/theme/black.css +261 -0
- data/vendor/reveal.js/css/theme/blood.css +191 -75
- data/vendor/reveal.js/css/theme/league.css +267 -0
- data/vendor/reveal.js/css/theme/moon.css +168 -51
- data/vendor/reveal.js/css/theme/night.css +165 -42
- data/vendor/reveal.js/css/theme/serif.css +181 -58
- data/vendor/reveal.js/css/theme/simple.css +173 -50
- data/vendor/reveal.js/css/theme/sky.css +170 -47
- data/vendor/reveal.js/css/theme/solarized.css +168 -51
- data/vendor/reveal.js/css/theme/source/beige.scss +1 -12
- data/vendor/reveal.js/css/theme/source/black.scss +49 -0
- data/vendor/reveal.js/css/theme/source/blood.scss +4 -4
- data/vendor/reveal.js/css/theme/source/{default.scss → league.scss} +5 -13
- data/vendor/reveal.js/css/theme/source/moon.scss +1 -12
- data/vendor/reveal.js/css/theme/source/serif.scss +1 -1
- data/vendor/reveal.js/css/theme/source/sky.scss +1 -1
- data/vendor/reveal.js/css/theme/source/solarized.scss +1 -12
- data/vendor/reveal.js/css/theme/source/white.scss +49 -0
- data/vendor/reveal.js/css/theme/template/settings.scss +13 -4
- data/vendor/reveal.js/css/theme/template/theme.scss +182 -13
- data/vendor/reveal.js/css/theme/white.css +261 -0
- data/vendor/reveal.js/index.html +198 -178
- data/vendor/reveal.js/js/reveal.js +1286 -392
- data/vendor/reveal.js/lib/css/zenburn.css +74 -71
- data/vendor/reveal.js/lib/font/{league_gothic_license → league-gothic/LICENSE} +0 -0
- data/vendor/reveal.js/lib/font/league-gothic/league-gothic.css +10 -0
- data/vendor/reveal.js/lib/font/league-gothic/league-gothic.eot +0 -0
- data/vendor/reveal.js/lib/font/league-gothic/league-gothic.ttf +0 -0
- data/vendor/reveal.js/lib/font/league-gothic/league-gothic.woff +0 -0
- data/vendor/reveal.js/lib/font/source-sans-pro/LICENSE +45 -0
- data/vendor/reveal.js/lib/font/source-sans-pro/source-sans-pro-italic.eot +0 -0
- data/vendor/reveal.js/lib/font/source-sans-pro/source-sans-pro-italic.ttf +0 -0
- data/vendor/reveal.js/lib/font/source-sans-pro/source-sans-pro-italic.woff +0 -0
- data/vendor/reveal.js/lib/font/source-sans-pro/source-sans-pro-regular.eot +0 -0
- data/vendor/reveal.js/lib/font/source-sans-pro/source-sans-pro-regular.ttf +0 -0
- data/vendor/reveal.js/lib/font/source-sans-pro/source-sans-pro-regular.woff +0 -0
- data/vendor/reveal.js/lib/font/source-sans-pro/source-sans-pro-semibold.eot +0 -0
- data/vendor/reveal.js/lib/font/source-sans-pro/source-sans-pro-semibold.ttf +0 -0
- data/vendor/reveal.js/lib/font/source-sans-pro/source-sans-pro-semibold.woff +0 -0
- data/vendor/reveal.js/lib/font/source-sans-pro/source-sans-pro-semibolditalic.eot +0 -0
- data/vendor/reveal.js/lib/font/source-sans-pro/source-sans-pro-semibolditalic.ttf +0 -0
- data/vendor/reveal.js/lib/font/source-sans-pro/source-sans-pro-semibolditalic.woff +0 -0
- data/vendor/reveal.js/lib/font/source-sans-pro/source-sans-pro.css +39 -0
- data/vendor/reveal.js/package.json +9 -7
- data/vendor/reveal.js/plugin/highlight/highlight.js +2 -4
- data/vendor/reveal.js/plugin/leap/leap.js +4 -2
- data/vendor/reveal.js/plugin/markdown/example.html +2 -2
- data/vendor/reveal.js/plugin/markdown/markdown.js +8 -7
- data/vendor/reveal.js/plugin/notes/notes.html +321 -182
- data/vendor/reveal.js/plugin/notes/notes.js +89 -45
- data/vendor/reveal.js/plugin/notes-server/client.js +49 -46
- data/vendor/reveal.js/plugin/notes-server/index.js +28 -21
- data/vendor/reveal.js/plugin/notes-server/notes.html +351 -97
- data/vendor/reveal.js/plugin/print-pdf/print-pdf.js +24 -20
- data/vendor/reveal.js/plugin/zoom-js/zoom.js +77 -57
- data/vendor/reveal.js/test/examples/barebones.html +2 -2
- data/vendor/reveal.js/test/examples/embedded-media.html +2 -2
- data/vendor/reveal.js/test/examples/math.html +2 -2
- data/vendor/reveal.js/test/examples/slide-backgrounds.html +29 -7
- data/vendor/reveal.js/test/test-markdown-element-attributes.html +6 -6
- data/vendor/reveal.js/test/test-markdown-slide-attributes.html +7 -7
- data/vendor/reveal.js/test/test-markdown.html +4 -4
- data/vendor/reveal.js/test/test-pdf.html +83 -0
- data/vendor/reveal.js/test/test-pdf.js +15 -0
- data/vendor/reveal.js/test/test.html +5 -4
- data/vendor/reveal.js/test/test.js +143 -9
- metadata +31 -13
- data/vendor/reveal.js/css/reveal.min.css +0 -7
- data/vendor/reveal.js/css/theme/default.css +0 -148
- data/vendor/reveal.js/js/reveal.min.js +0 -9
- data/vendor/reveal.js/lib/font/league_gothic-webfont.eot +0 -0
- data/vendor/reveal.js/lib/font/league_gothic-webfont.svg +0 -230
- data/vendor/reveal.js/lib/font/league_gothic-webfont.ttf +0 -0
- data/vendor/reveal.js/lib/font/league_gothic-webfont.woff +0 -0
- data/vendor/reveal.js/plugin/postmessage/example.html +0 -39
- data/vendor/reveal.js/plugin/postmessage/postmessage.js +0 -42
data/vendor/reveal.js/README.md
CHANGED
@@ -1,8 +1,8 @@
|
|
1
|
-
# reveal.js [![Build Status](https://travis-ci.org/hakimel/reveal.js.
|
1
|
+
# reveal.js [![Build Status](https://travis-ci.org/hakimel/reveal.js.svg?branch=master)](https://travis-ci.org/hakimel/reveal.js)
|
2
2
|
|
3
3
|
A framework for easily creating beautiful presentations using HTML. [Check out the live demo](http://lab.hakim.se/reveal-js/).
|
4
4
|
|
5
|
-
reveal.js comes with a broad range of features including [nested slides](https://github.com/hakimel/reveal.js#markup), [
|
5
|
+
reveal.js comes with a broad range of features including [nested slides](https://github.com/hakimel/reveal.js#markup), [Markdown contents](https://github.com/hakimel/reveal.js#markdown), [PDF export](https://github.com/hakimel/reveal.js#pdf-export), [speaker notes](https://github.com/hakimel/reveal.js#speaker-notes) and a [JavaScript API](https://github.com/hakimel/reveal.js#api). It's best viewed in a modern browser but [fallbacks](https://github.com/hakimel/reveal.js/wiki/Browser-Support) are available to make sure your presentation can still be viewed elsewhere.
|
6
6
|
|
7
7
|
|
8
8
|
#### More reading:
|
@@ -13,7 +13,7 @@ reveal.js comes with a broad range of features including [nested slides](https:/
|
|
13
13
|
|
14
14
|
## Online Editor
|
15
15
|
|
16
|
-
Presentations are written using HTML or
|
16
|
+
Presentations are written using HTML or Markdown but there's also an online editor for those of you who prefer a graphical interface. Give it a try at [http://slides.com](http://slides.com).
|
17
17
|
|
18
18
|
|
19
19
|
## Instructions
|
@@ -59,8 +59,8 @@ When used locally, this feature requires that reveal.js [runs from a local web s
|
|
59
59
|
```html
|
60
60
|
<section data-markdown="example.md"
|
61
61
|
data-separator="^\n\n\n"
|
62
|
-
data-vertical="^\n\n"
|
63
|
-
data-notes="^Note:"
|
62
|
+
data-separator-vertical="^\n\n"
|
63
|
+
data-separator-notes="^Note:"
|
64
64
|
data-charset="iso-8859-15">
|
65
65
|
</section>
|
66
66
|
```
|
@@ -86,7 +86,7 @@ Special syntax (in html comment) is available for adding attributes to the slide
|
|
86
86
|
<section data-markdown>
|
87
87
|
<script type="text/template">
|
88
88
|
<!-- .slide: data-background="#ff0000" -->
|
89
|
-
|
89
|
+
Markdown content
|
90
90
|
</script>
|
91
91
|
</section>
|
92
92
|
```
|
@@ -136,6 +136,10 @@ Reveal.initialize({
|
|
136
136
|
// i.e. contained within a limited portion of the screen
|
137
137
|
embedded: false,
|
138
138
|
|
139
|
+
// Flags if we should show a help overlay when the questionmark
|
140
|
+
// key is pressed
|
141
|
+
help: true,
|
142
|
+
|
139
143
|
// Number of milliseconds between automatically proceeding to the
|
140
144
|
// next slide, disabled when set to 0, this value can be overwritten
|
141
145
|
// by using a data-autoslide attribute on your slides
|
@@ -154,13 +158,13 @@ Reveal.initialize({
|
|
154
158
|
previewLinks: false,
|
155
159
|
|
156
160
|
// Transition style
|
157
|
-
transition: 'default', //
|
161
|
+
transition: 'default', // none/fade/slide/convex/concave/zoom
|
158
162
|
|
159
163
|
// Transition speed
|
160
164
|
transitionSpeed: 'default', // default/fast/slow
|
161
165
|
|
162
166
|
// Transition style for full page slide backgrounds
|
163
|
-
backgroundTransition: 'default', //
|
167
|
+
backgroundTransition: 'default', // none/fade/slide/convex/concave/zoom
|
164
168
|
|
165
169
|
// Number of slides away from the current that are visible
|
166
170
|
viewDistance: 3,
|
@@ -175,8 +179,6 @@ Reveal.initialize({
|
|
175
179
|
});
|
176
180
|
```
|
177
181
|
|
178
|
-
Note that the new default vertical centering option will break compatibility with slides that were using transitions with backgrounds (`cube` and `page`). To restore the previous behavior, set `center` to `false`.
|
179
|
-
|
180
182
|
|
181
183
|
The configuration can be updated after initialization using the ```configure``` method:
|
182
184
|
|
@@ -207,13 +209,13 @@ Reveal.initialize({
|
|
207
209
|
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
|
208
210
|
|
209
211
|
// Zoom in and out with Alt+click
|
210
|
-
{ src: 'plugin/zoom-js/zoom.js', async: true
|
212
|
+
{ src: 'plugin/zoom-js/zoom.js', async: true },
|
211
213
|
|
212
214
|
// Speaker notes
|
213
|
-
{ src: 'plugin/notes/notes.js', async: true
|
215
|
+
{ src: 'plugin/notes/notes.js', async: true },
|
214
216
|
|
215
217
|
// Remote control your reveal.js presentation using a touch device
|
216
|
-
{ src: 'plugin/remotes/remotes.js', async: true
|
218
|
+
{ src: 'plugin/remotes/remotes.js', async: true },
|
217
219
|
|
218
220
|
// MathJax
|
219
221
|
{ src: 'plugin/math/math.js', async: true }
|
@@ -228,6 +230,17 @@ You can add your own extensions using the same syntax. The following properties
|
|
228
230
|
- **condition**: [optional] Function which must return true for the script to be loaded
|
229
231
|
|
230
232
|
|
233
|
+
### Ready Event
|
234
|
+
|
235
|
+
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()`.
|
236
|
+
|
237
|
+
```javascript
|
238
|
+
Reveal.addEventListener( 'ready', function( event ) {
|
239
|
+
// event.currentSlide, event.indexh, event.indexv
|
240
|
+
} );
|
241
|
+
```
|
242
|
+
|
243
|
+
|
231
244
|
### Presentation Size
|
232
245
|
|
233
246
|
All presentations have a normal size, that is the resolution at which they are authored. The framework will automatically scale presentations uniformly based on this size to ensure that everything fits on any given display or viewport.
|
@@ -250,7 +263,7 @@ Reveal.initialize({
|
|
250
263
|
|
251
264
|
// Bounds for smallest/largest possible scale to apply to content
|
252
265
|
minScale: 0.2,
|
253
|
-
maxScale: 1.
|
266
|
+
maxScale: 1.5
|
254
267
|
|
255
268
|
});
|
256
269
|
```
|
@@ -266,15 +279,20 @@ Reveal.configure({
|
|
266
279
|
autoSlide: 5000
|
267
280
|
});
|
268
281
|
```
|
282
|
+
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.
|
269
283
|
|
270
|
-
|
271
|
-
|
272
|
-
You can also override the slide duration for individual slides by using the ```data-autoslide``` attribute on individual sections:
|
284
|
+
You can also override the slide duration for individual slides and fragments by using the ```data-autoslide``` attribute:
|
273
285
|
|
274
286
|
```html
|
275
|
-
<section data-autoslide="
|
287
|
+
<section data-autoslide="2000">
|
288
|
+
<p>After 2 seconds the first fragment will be shown.</p>
|
289
|
+
<p class="fragment" data-autoslide="10000">After 10 seconds the next fragment will be shown.</p>
|
290
|
+
<p class="fragment">Now, the fragment is displayed for 2 seconds before the next slide is shown.</p>
|
291
|
+
</section>
|
276
292
|
```
|
277
293
|
|
294
|
+
Whenever the auto-slide mode is resumed or paused the ```autoslideresumed``` and ```autoslidepaused``` events are fired.
|
295
|
+
|
278
296
|
|
279
297
|
### Keyboard Bindings
|
280
298
|
|
@@ -290,10 +308,27 @@ Reveal.configure({
|
|
290
308
|
});
|
291
309
|
```
|
292
310
|
|
311
|
+
### Lazy Loading
|
312
|
+
|
313
|
+
When working on presentation with a lot of media or iframe content it's important to load lazily. Lazy loading means that reveal.js will only load content for the few slides nearest to the current slide. The number of slides that are preloaded is determined by the `viewDistance` configuration option.
|
314
|
+
|
315
|
+
To enable lazy loading all you need to do is change your "src" attributes to "data-src" as shown below. This is supported for image, video, audio and iframe elements.
|
316
|
+
|
317
|
+
```html
|
318
|
+
<section>
|
319
|
+
<img data-src="image.png">
|
320
|
+
<iframe data-src="http://slides.com"></iframe>
|
321
|
+
<video>
|
322
|
+
<source data-src="video.webm" type="video/webm" />
|
323
|
+
<source data-src="video.mp4" type="video/mp4" />
|
324
|
+
</video>
|
325
|
+
</section>
|
326
|
+
```
|
327
|
+
|
293
328
|
|
294
329
|
### API
|
295
330
|
|
296
|
-
The ``Reveal``
|
331
|
+
The ``Reveal`` object exposes a JavaScript API for controlling navigation and reading state:
|
297
332
|
|
298
333
|
```javascript
|
299
334
|
// Navigation
|
@@ -306,30 +341,35 @@ Reveal.prev();
|
|
306
341
|
Reveal.next();
|
307
342
|
Reveal.prevFragment();
|
308
343
|
Reveal.nextFragment();
|
344
|
+
|
345
|
+
// Toggle presentation states, optionally pass true/false to force on/off
|
309
346
|
Reveal.toggleOverview();
|
310
347
|
Reveal.togglePause();
|
348
|
+
Reveal.toggleAutoSlide();
|
349
|
+
|
350
|
+
// Change a config value at runtime
|
351
|
+
Reveal.configure({ controls: true });
|
352
|
+
|
353
|
+
// Returns the present configuration options
|
354
|
+
Reveal.getConfig();
|
355
|
+
|
356
|
+
// Fetch the current scale of the presentation
|
357
|
+
Reveal.getScale();
|
311
358
|
|
312
359
|
// Retrieves the previous and current slide elements
|
313
360
|
Reveal.getPreviousSlide();
|
314
361
|
Reveal.getCurrentSlide();
|
315
362
|
|
316
363
|
Reveal.getIndices(); // { h: 0, v: 0 } }
|
364
|
+
Reveal.getProgress(); // 0-1
|
365
|
+
Reveal.getTotalSlides();
|
317
366
|
|
318
367
|
// State checks
|
319
368
|
Reveal.isFirstSlide();
|
320
369
|
Reveal.isLastSlide();
|
321
370
|
Reveal.isOverview();
|
322
371
|
Reveal.isPaused();
|
323
|
-
|
324
|
-
|
325
|
-
### Ready Event
|
326
|
-
|
327
|
-
The 'ready' event is fired when reveal.js has loaded all (synchronous) dependencies and is ready to start navigating.
|
328
|
-
|
329
|
-
```javascript
|
330
|
-
Reveal.addEventListener( 'ready', function( event ) {
|
331
|
-
// event.currentSlide, event.indexh, event.indexv
|
332
|
-
} );
|
372
|
+
Reveal.isAutoSliding();
|
333
373
|
```
|
334
374
|
|
335
375
|
### Slide Changed Event
|
@@ -344,8 +384,24 @@ Reveal.addEventListener( 'slidechanged', function( event ) {
|
|
344
384
|
} );
|
345
385
|
```
|
346
386
|
|
387
|
+
### Presentation State
|
388
|
+
|
389
|
+
The presentation's current state can be fetched by using the `getState` method. A state object contains all of the information required to put the presentation back as it was when `getState` was first called. Sort of like a snapshot. It's a simple object that can easily be stringified and persisted or sent over the wire.
|
347
390
|
|
348
|
-
|
391
|
+
```javascript
|
392
|
+
Reveal.slide( 1 );
|
393
|
+
// we're on slide 1
|
394
|
+
|
395
|
+
var state = Reveal.getState();
|
396
|
+
|
397
|
+
Reveal.slide( 3 );
|
398
|
+
// we're on slide 3
|
399
|
+
|
400
|
+
Reveal.setState( state );
|
401
|
+
// we're back on slide 1
|
402
|
+
```
|
403
|
+
|
404
|
+
### Slide States
|
349
405
|
|
350
406
|
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.
|
351
407
|
|
@@ -359,7 +415,7 @@ Reveal.addEventListener( 'somestate', function() {
|
|
359
415
|
|
360
416
|
### Slide Backgrounds
|
361
417
|
|
362
|
-
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
|
418
|
+
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. Below are a few examples.
|
363
419
|
|
364
420
|
```html
|
365
421
|
<section data-background="#ff0000">
|
@@ -371,6 +427,12 @@ Slides are contained within a limited portion of the screen by default to allow
|
|
371
427
|
<section data-background="http://example.com/image.png" data-background-size="100px" data-background-repeat="repeat">
|
372
428
|
<h2>This background image will be sized to 100px and repeated.</h2>
|
373
429
|
</section>
|
430
|
+
<section data-background-video="https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.mp4,https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.webm">
|
431
|
+
<h2>Video. Multiple sources can be defined using a comma separated list.</h2>
|
432
|
+
</section>
|
433
|
+
<section data-background-iframe="https://slides.com">
|
434
|
+
<h2>Embeds a web page as a background. Note that the page won't be interactive.</h2>
|
435
|
+
</section>
|
374
436
|
```
|
375
437
|
|
376
438
|
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.
|
@@ -390,7 +452,7 @@ Reveal.initialize({
|
|
390
452
|
parallaxBackgroundSize: '', // CSS syntax, e.g. "2100px 900px" - currently only pixels are supported (don't use % or auto)
|
391
453
|
|
392
454
|
// This slide transition gives best results:
|
393
|
-
transition:
|
455
|
+
transition: 'slide'
|
394
456
|
|
395
457
|
});
|
396
458
|
```
|
@@ -558,12 +620,45 @@ Limitations:
|
|
558
620
|
- Only one descendant per slide section can be stretched
|
559
621
|
|
560
622
|
|
623
|
+
### postMessage API
|
624
|
+
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:
|
625
|
+
|
626
|
+
```javascript
|
627
|
+
<window>.postMessage( JSON.stringify({ method: 'slide', args: [ 2 ] }), '*' );
|
628
|
+
```
|
629
|
+
|
630
|
+
When reveal.js runs inside of an iframe it can optionally bubble all of its events to the parent. Bubbled events are stringified JSON with three fields: namespace, eventName and state. Here's how you subscribe to them from the parent window:
|
631
|
+
|
632
|
+
```javascript
|
633
|
+
window.addEventListener( 'message', function( event ) {
|
634
|
+
var data = JSON.parse( event.data );
|
635
|
+
if( data.namespace === 'reveal' && data.eventName ='slidechanged' ) {
|
636
|
+
// Slide changed, see data.state for slide number
|
637
|
+
}
|
638
|
+
} );
|
639
|
+
```
|
640
|
+
|
641
|
+
This cross-window messaging can be toggled on or off using configuration flags.
|
642
|
+
|
643
|
+
```javascript
|
644
|
+
Reveal.initialize({
|
645
|
+
...,
|
646
|
+
|
647
|
+
// Exposes the reveal.js API through window.postMessage
|
648
|
+
postMessage: true,
|
649
|
+
|
650
|
+
// Dispatches all reveal.js events to the parent window through postMessage
|
651
|
+
postMessageEvents: false
|
652
|
+
});
|
653
|
+
```
|
654
|
+
|
655
|
+
|
561
656
|
## PDF Export
|
562
657
|
|
563
658
|
Presentations can be exported to PDF via a special print stylesheet. This feature requires that you use [Google Chrome](http://google.com/chrome).
|
564
|
-
Here's an example of an exported presentation that's been uploaded to SlideShare: http://www.slideshare.net/hakimel/revealjs-
|
659
|
+
Here's an example of an exported presentation that's been uploaded to SlideShare: http://www.slideshare.net/hakimel/revealjs-300.
|
565
660
|
|
566
|
-
1. Open your presentation with [css/print/pdf.css](https://github.com/hakimel/reveal.js/blob/master/css/print/pdf.css)
|
661
|
+
1. Open your presentation with `print-pdf` included anywhere in the query string. This triggers the default index HTML to load the PDF print stylesheet ([css/print/pdf.css](https://github.com/hakimel/reveal.js/blob/master/css/print/pdf.css)). You can test this with [lab.hakim.se/reveal-js?print-pdf](http://lab.hakim.se/reveal-js?print-pdf).
|
567
662
|
2. Open the in-browser print dialog (CMD+P).
|
568
663
|
3. Change the **Destination** setting to **Save as PDF**.
|
569
664
|
4. Change the **Layout** to **Landscape**.
|
@@ -576,7 +671,9 @@ Here's an example of an exported presentation that's been uploaded to SlideShare
|
|
576
671
|
|
577
672
|
The framework comes with a few different themes included:
|
578
673
|
|
579
|
-
-
|
674
|
+
- black: Black background, white text, blue links (default theme)
|
675
|
+
- white: White background, black text, blue links
|
676
|
+
- league: Gray background, white text, blue links (default theme for reveal.js < 3.0.0)
|
580
677
|
- beige: Beige background, dark text, brown links
|
581
678
|
- sky: Blue background, thin white text, blue links
|
582
679
|
- night: Black background, thick white text, orange links
|
@@ -584,10 +681,10 @@ The framework comes with a few different themes included:
|
|
584
681
|
- simple: White background, black text, blue links
|
585
682
|
- solarized: Cream-colored background, dark green text, blue links
|
586
683
|
|
587
|
-
Each theme is available as a separate stylesheet. To change theme you will need to replace **
|
684
|
+
Each theme is available as a separate stylesheet. To change theme you will need to replace **black** below with your desired theme name in index.html:
|
588
685
|
|
589
686
|
```html
|
590
|
-
<link rel="stylesheet" href="css/theme/
|
687
|
+
<link rel="stylesheet" href="css/theme/black.css" id="theme">
|
591
688
|
```
|
592
689
|
|
593
690
|
If you want to add a theme of your own see the instructions here: [/css/theme/README.md](https://github.com/hakimel/reveal.js/blob/master/css/theme/README.md).
|
@@ -614,7 +711,7 @@ When used locally, this feature requires that reveal.js [runs from a local web s
|
|
614
711
|
If you're using the external Markdown plugin, you can add notes with the help of a special delimiter:
|
615
712
|
|
616
713
|
```html
|
617
|
-
<section data-markdown="example.md" data-separator="^\n\n\n" data-vertical="^\n\n" data-notes="^Note:"></section>
|
714
|
+
<section data-markdown="example.md" data-separator="^\n\n\n" data-separator-vertical="^\n\n" data-separator-notes="^Note:"></section>
|
618
715
|
|
619
716
|
# Title
|
620
717
|
## Sub-title
|
@@ -683,7 +780,7 @@ Reveal.initialize({
|
|
683
780
|
|
684
781
|
// Don't forget to add the dependencies
|
685
782
|
dependencies: [
|
686
|
-
{ src: '//cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.
|
783
|
+
{ src: '//cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.16/socket.io.min.js', async: true },
|
687
784
|
{ src: 'plugin/multiplex/master.js', async: true },
|
688
785
|
|
689
786
|
// and if you want speaker notes
|
@@ -711,7 +808,7 @@ Reveal.initialize({
|
|
711
808
|
|
712
809
|
// Don't forget to add the dependencies
|
713
810
|
dependencies: [
|
714
|
-
{ src: '//cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.
|
811
|
+
{ src: '//cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.16/socket.io.min.js', async: true },
|
715
812
|
{ src: 'plugin/multiplex/client.js', async: true }
|
716
813
|
|
717
814
|
// other dependencies...
|
@@ -749,7 +846,7 @@ Reveal.initialize({
|
|
749
846
|
|
750
847
|
// Don't forget to add the dependencies
|
751
848
|
dependencies: [
|
752
|
-
{ src: '//cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.
|
849
|
+
{ src: '//cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.16/socket.io.min.js', async: true },
|
753
850
|
{ src: 'plugin/multiplex/client.js', async: true }
|
754
851
|
|
755
852
|
// other dependencies...
|
@@ -772,7 +869,7 @@ Reveal.initialize({
|
|
772
869
|
|
773
870
|
// Don't forget to add the dependencies
|
774
871
|
dependencies: [
|
775
|
-
{ src: '//cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.
|
872
|
+
{ src: '//cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.16/socket.io.min.js', async: true },
|
776
873
|
{ src: 'plugin/multiplex/master.js', async: true },
|
777
874
|
{ src: 'plugin/multiplex/client.js', async: true }
|
778
875
|
|
@@ -871,35 +968,35 @@ The core of reveal.js is very easy to install. You'll simply need to download a
|
|
871
968
|
|
872
969
|
### Full setup
|
873
970
|
|
874
|
-
Some reveal.js features, like external
|
971
|
+
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.
|
875
972
|
|
876
973
|
1. Install [Node.js](http://nodejs.org/)
|
877
974
|
|
878
975
|
2. Install [Grunt](http://gruntjs.com/getting-started#installing-the-cli)
|
879
976
|
|
880
977
|
4. Clone the reveal.js repository
|
881
|
-
```sh
|
882
|
-
$ git clone https://github.com/hakimel/reveal.js.git
|
883
|
-
```
|
978
|
+
```sh
|
979
|
+
$ git clone https://github.com/hakimel/reveal.js.git
|
980
|
+
```
|
884
981
|
|
885
982
|
5. Navigate to the reveal.js folder
|
886
|
-
```sh
|
887
|
-
$ cd reveal.js
|
888
|
-
```
|
983
|
+
```sh
|
984
|
+
$ cd reveal.js
|
985
|
+
```
|
889
986
|
|
890
987
|
6. Install dependencies
|
891
|
-
```sh
|
892
|
-
$ npm install
|
893
|
-
```
|
988
|
+
```sh
|
989
|
+
$ npm install
|
990
|
+
```
|
894
991
|
|
895
992
|
7. Serve the presentation and monitor source files for changes
|
896
|
-
```sh
|
897
|
-
$ grunt serve
|
898
|
-
```
|
993
|
+
```sh
|
994
|
+
$ grunt serve
|
995
|
+
```
|
899
996
|
|
900
997
|
8. Open <http://localhost:8000> to view your presentation
|
901
998
|
|
902
|
-
You can change the port by using `grunt serve --port 8001`.
|
999
|
+
You can change the port by using `grunt serve --port 8001`.
|
903
1000
|
|
904
1001
|
|
905
1002
|
### Folder Structure
|
@@ -909,25 +1006,8 @@ You can change the port by using `grunt serve --port 8001`.
|
|
909
1006
|
- **lib/** All other third party assets (JavaScript, CSS, fonts)
|
910
1007
|
|
911
1008
|
|
912
|
-
### Contributing
|
913
|
-
|
914
|
-
Please keep the [issue tracker](http://github.com/hakimel/reveal.js/issues) limited to **bug reports**, **feature requests** and **pull requests**. If you are reporting a bug make sure to include information about which browser and operating system you are using as well as the necessary steps to reproduce the issue.
|
915
|
-
|
916
|
-
If you have personal support questions use [StackOverflow](http://stackoverflow.com/questions/tagged/reveal.js).
|
917
|
-
|
918
|
-
|
919
|
-
#### Pull requests
|
920
|
-
|
921
|
-
- Should follow the coding style of the file you work in, most importantly:
|
922
|
-
- Tabs to indent
|
923
|
-
- Single-quoted strings
|
924
|
-
- Should be made towards the **dev branch**
|
925
|
-
- Should be submitted from a feature/topic branch (not your master)
|
926
|
-
- Should not include the minified **reveal.min.js** file
|
927
|
-
|
928
|
-
|
929
1009
|
## License
|
930
1010
|
|
931
1011
|
MIT licensed
|
932
1012
|
|
933
|
-
Copyright (C)
|
1013
|
+
Copyright (C) 2015 Hakim El Hattab, http://hakim.se
|