reveal-ck 0.1.3 → 0.1.4
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +8 -8
- data/README.md +24 -129
- data/bin/reveal-ck +3 -2
- data/lib/reveal-ck.rb +1 -1
- data/lib/reveal-ck/presentation_builder.rb +5 -5
- data/lib/reveal-ck/template_processor.rb +29 -0
- data/lib/reveal-ck/version.rb +1 -1
- data/reveal.js/Gruntfile.js +6 -2
- data/reveal.js/README.md +139 -31
- data/reveal.js/css/print/paper.css +1 -1
- data/reveal.js/css/print/pdf.css +1 -1
- data/reveal.js/css/reveal.css +134 -88
- data/reveal.js/css/reveal.min.css +1 -1
- data/reveal.js/css/theme/template/settings.scss +1 -0
- data/reveal.js/css/theme/template/theme.scss +1 -1
- data/reveal.js/index.html +7 -6
- data/reveal.js/js/reveal.js +496 -299
- data/reveal.js/js/reveal.min.js +2 -2
- data/reveal.js/lib/css/zenburn.css +16 -17
- data/reveal.js/package.json +10 -9
- data/reveal.js/plugin/leap/leap.js +157 -0
- data/reveal.js/plugin/markdown/example.html +3 -2
- data/reveal.js/plugin/markdown/example.md +2 -0
- data/reveal.js/plugin/markdown/markdown.js +273 -143
- data/reveal.js/plugin/math/math.js +64 -0
- data/reveal.js/plugin/notes/notes.html +27 -17
- data/reveal.js/plugin/notes/notes.js +25 -47
- data/reveal.js/{examples → test/examples}/assets/image1.png +0 -0
- data/reveal.js/{examples → test/examples}/assets/image2.png +0 -0
- data/reveal.js/{examples → test/examples}/barebones.html +3 -3
- data/reveal.js/{examples → test/examples}/embedded-media.html +4 -4
- data/reveal.js/test/examples/math.html +185 -0
- data/reveal.js/{examples → test/examples}/slide-backgrounds.html +4 -4
- data/reveal.js/test/qunit-1.12.0.css +244 -0
- data/reveal.js/test/qunit-1.12.0.js +2212 -0
- data/reveal.js/test/test-markdown.html +52 -0
- data/reveal.js/test/test-markdown.js +15 -0
- data/reveal.js/test/test.html +62 -0
- data/reveal.js/test/test.js +353 -0
- data/spec/data/haml/basic.haml +2 -2
- data/spec/data/html/converted_basic_slim.html +10 -0
- data/spec/data/slim/basic.slim +5 -0
- data/spec/lib/reveal-ck/template_processor_spec.rb +29 -0
- metadata +50 -9
- data/lib/reveal-ck/haml_processor.rb +0 -26
- data/spec/lib/reveal-ck/haml_processor_spec.rb +0 -40
checksums.yaml
CHANGED
@@ -1,15 +1,15 @@
|
|
1
1
|
---
|
2
2
|
!binary "U0hBMQ==":
|
3
3
|
metadata.gz: !binary |-
|
4
|
-
|
4
|
+
ZDU1YTM4NTM5MWM4Y2U0NmFlN2ZiYTBiNmQ5NWQ0ZTc1OThkYTNiMg==
|
5
5
|
data.tar.gz: !binary |-
|
6
|
-
|
6
|
+
MTExYzMwYWIzZTdiMDAwMDExNTg4MjNmNDE5ZTRjYjI4YTBkNDgwOA==
|
7
7
|
!binary "U0hBNTEy":
|
8
8
|
metadata.gz: !binary |-
|
9
|
-
|
10
|
-
|
11
|
-
|
9
|
+
ZjU3MDUxN2QyMWExN2IyZGUwZWI1ODFhYTYyYzYwZDE3ODM5MjExOGJlMmVi
|
10
|
+
NjRlNmU3M2YzYWIzMGIyM2JlNzJiODcxZDFiMTlkYmE5ZTdhODMxNjE2ZDk2
|
11
|
+
NGU2NGIxZjY0ZGVhYWVlZjdhOTFkMTNmNTVlYTAzODAyMTU1YjQ=
|
12
12
|
data.tar.gz: !binary |-
|
13
|
-
|
14
|
-
|
15
|
-
|
13
|
+
MWEwMWJlNTMyNWVhMWVkNDI0OGRiNTI5YzcwOWExODZjZWQ3N2VhYWI2NTZj
|
14
|
+
MzljMGQwMjNiMjc2ZDJhMjIwMTU1OTcyM2VmZWRmZDlhMjUwM2RiMGZiNjgz
|
15
|
+
MWYyNTM1ZThlOTRkNzhiODNhZGYzNTNkODIyZDk5N2FhNjgzMzk=
|
data/README.md
CHANGED
@@ -1,6 +1,6 @@
|
|
1
|
-
# reveal-ck: a [reveal.js]
|
1
|
+
# reveal-ck: a [reveal.js][reveal-js] construction kit
|
2
2
|
|
3
|
-
[![Build Status]
|
3
|
+
[![Build Status][travis-reveal-ck-badge]](https://travis-ci.org/jedcn/reveal-ck)
|
4
4
|
|
5
5
|
## Overview
|
6
6
|
|
@@ -8,80 +8,20 @@ This project is the home of a gem named `reveal-ck` that lets you
|
|
8
8
|
quickly author [reveal.js](http://lab.hakim.se/reveal-js/)
|
9
9
|
presentations.
|
10
10
|
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
Here's a starter repository that contains everything you need to get
|
15
|
-
going with reveal-ck: https://github.com/jedcn/reveal-ck-template in
|
16
|
-
less than 5 minutes.
|
11
|
+
Here's a
|
12
|
+
[high level description of what reveal-ck is about][jedcn-reveal-ck]
|
13
|
+
and how to get up and running with it.
|
17
14
|
|
18
15
|
The hope is that you will be able to leverage all of the power,
|
19
16
|
beauty, and functionality that comes from reveal.js while focusing
|
20
17
|
entirely on the actual content and ideas you are trying to get across.
|
21
18
|
|
22
|
-
|
23
|
-
|
24
|
-
in your browser.
|
25
|
-
|
26
|
-
### What You Provide
|
27
|
-
|
28
|
-
You provide:
|
29
|
-
|
30
|
-
* A file containing your slide content in HAML (`slides.haml`)
|
31
|
-
|
32
|
-
* (optional) If you have any images that are not already on the web,
|
33
|
-
you can save these into a directory named `images` and the contents
|
34
|
-
will be bundled up into your generated slides. This will allow you
|
35
|
-
to relatively reference the images.
|
36
|
-
|
37
|
-
## Getting Started
|
38
|
-
|
39
|
-
At present, we assume you've got a functional Ruby 1.9.x environment
|
40
|
-
up and running one way or another and bundler.
|
41
|
-
|
42
|
-
If that's the case, try the following:
|
43
|
-
|
44
|
-
```
|
45
|
-
$ git clone git@github.com:jedcn/reveal-ck-template.git
|
46
|
-
Cloning into 'reveal-ck-template'...
|
47
|
-
remote: Counting objects: 12, done.
|
48
|
-
remote: Compressing objects: 100% (7/7), done.
|
49
|
-
remote: Total 12 (delta 2), reused 12 (delta 2)
|
50
|
-
Receiving objects: 100% (12/12), done.
|
51
|
-
Resolving deltas: 100% (2/2), done.
|
52
|
-
$ cd reveal-ck-template
|
53
|
-
$ bundle
|
54
|
-
Fetching gem metadata from https://rubygems.org/......
|
55
|
-
Installing rake (10.0.4)
|
56
|
-
Installing gli (2.5.6)
|
57
|
-
Installing tilt (1.3.6)
|
58
|
-
Installing haml (4.0.1)
|
59
|
-
Installing reveal-ck (0.1.1)
|
60
|
-
Using bundler (1.2.3)
|
61
|
-
Your bundle is complete! Use `bundle show [gemname]` to see where a bundled gem is installed.
|
62
|
-
$ reveal-ck generate
|
63
|
-
$ open slides/index.html
|
64
|
-
```
|
65
|
-
|
66
|
-
If all has gone well, you should now have a `slides/` directory and if
|
67
|
-
you open up `slides/index.html` in a browser, you should see a
|
68
|
-
reveal.js presentation that was generated from the `slides.haml`
|
69
|
-
|
70
|
-
## Authoring Slides
|
71
|
-
|
72
|
-
Now that you are assured of basic functionality, start making changes
|
73
|
-
and customizing `slides.haml`. Once you've made a change you'd like to
|
74
|
-
see, re-run `reveal-ck generate` and then re-open (or refresh)
|
75
|
-
`slides/index.html`
|
76
|
-
|
77
|
-
[reveal.js](http://lab.hakim.se/reveal-js/) has a great
|
78
|
-
[live demo](http://lab.hakim.se/reveal-js/), and if you take a look at
|
79
|
-
the source in the demo, you can quickly see the HTML and CSS that has
|
80
|
-
good support by default when placed into your `slides.haml`.
|
19
|
+
To get started, take a look at
|
20
|
+
[this project that's got everything you need][github-jedcn-reveal-ck-template].
|
81
21
|
|
82
22
|
## Why not just clone reveal.js?
|
83
23
|
|
84
|
-
Or why not use http://
|
24
|
+
Or why not use http://slid.es/ which offers a WYSIWYG experience?
|
85
25
|
|
86
26
|
You can! For sure.
|
87
27
|
|
@@ -96,71 +36,26 @@ The thought behind this project to help you focus on what *you* want
|
|
96
36
|
to say.
|
97
37
|
|
98
38
|
For me, focusing becomes easier and my thoughts clearer when I reduce
|
99
|
-
the list of slides to a single file (
|
100
|
-
contains the slide content I am presenting and
|
101
|
-
|
102
|
-
HAML isn't the most readable thing (say, compared to markdown), but it
|
103
|
-
is decent, and sharing or reviewing something like ```slides.haml```
|
104
|
-
is easier than reviewing the final presentation:
|
39
|
+
the list of slides to a single file (`slides.slim` or
|
40
|
+
`slides.haml`). It only contains the slide content I am presenting and
|
41
|
+
there's minimal markup.
|
105
42
|
|
106
43
|
* If you look at the presentation in a browser, you can't scan all of
|
107
|
-
the slides at once. You need to visit them. If you're looking at
|
108
|
-
|
44
|
+
the slides at once. You need to visit them. If you're looking at a
|
45
|
+
single file, you can quickly scan through 30+ slides.
|
109
46
|
|
110
47
|
* If you look at the html behind the presentation (say, view source),
|
111
|
-
there's a bunch of stuff that
|
112
|
-
javascript, etc.
|
113
|
-
|
114
|
-
Finally, if you track your slides in a system like git, you can get
|
115
|
-
meaningful diffs between versions of ```slides.haml```. This is
|
116
|
-
slightly easier than if you track the generated presentation.
|
117
|
-
|
118
|
-
In the end, the presentation framework,
|
119
|
-
[reveal.js](http://lab.hakim.se/reveal-js/), can make things pretty,
|
120
|
-
but only you can make a presentation that is worthwhile.
|
121
|
-
|
122
|
-
[talk-learning-with-tools-source]: https://github.com/jedcn/talk-learning-with-tools
|
123
|
-
[talk-learning-with-tools-result]: http://www.jednorthridge.com/talks/learning-with-tools
|
124
|
-
|
125
|
-
## Development
|
126
|
-
|
127
|
-
If you want to make changes to reveal-ck, you should first try the
|
128
|
-
following:
|
129
|
-
|
130
|
-
```
|
131
|
-
git submodule init
|
132
|
-
git submodule update
|
133
|
-
rake
|
134
|
-
```
|
135
|
-
|
136
|
-
The gem, reveal-ck, relies on having a copy of reveal.js (the original
|
137
|
-
JavaScript based project) via a git submodule.
|
138
|
-
|
139
|
-
The commands above get things online and verify basic functionality.
|
140
|
-
|
141
|
-
### Testing
|
142
|
-
|
143
|
-
The testing strategy blends rspec and cucumber. There's not much going
|
144
|
-
on here (at a code level) so RSpec is straight forward. The
|
145
|
-
executable, reveal-ck, is verified as a command line tool with Aruba.
|
146
|
-
|
147
|
-
As you might expect, `rake spec` runs specs, `rake cucumber` runs
|
148
|
-
features, and `rake` runs both `spec` and `cucumber`.
|
149
|
-
|
150
|
-
### Travis
|
151
|
-
|
152
|
-
This project is setup within Travis. Here is the
|
153
|
-
[project page](https://travis-ci.org/jedcn/reveal-ck).
|
48
|
+
there's a bunch of stuff that is about making the magic happen:
|
49
|
+
styles, javascript, etc, and that distracts from your content.
|
154
50
|
|
155
|
-
|
51
|
+
* If you track your slides in a system like git, you can get
|
52
|
+
meaningful diffs between versions of a single file. This is slightly
|
53
|
+
easier than if you track the generated presentation.
|
156
54
|
|
157
|
-
|
158
|
-
|
55
|
+
In the end, [reveal.js][reveal-js], can make things pretty, but only
|
56
|
+
you can make a presentation that is worthwhile.
|
159
57
|
|
160
|
-
|
161
|
-
|
162
|
-
|
163
|
-
|
164
|
-
FileSplicer is invoked in the SliderBuilder. It's got hard-coded
|
165
|
-
begin/end line numbers for where the default reveal.js slides are
|
166
|
-
found. This commit is a good example of such a change: b29b050.
|
58
|
+
[jedcn-reveal-ck]: http://jedcn.com/posts/reveal-ck
|
59
|
+
[github-jedcn-reveal-ck-template]: http://github.com/jedcn/reveal-ck-template
|
60
|
+
[reveal-js]: http://lab.hakim.se/reveal-js
|
61
|
+
[travis-reveal-ck-badge]: https://travis-ci.org/jedcn/reveal-ck.png
|
data/bin/reveal-ck
CHANGED
@@ -21,7 +21,8 @@ command :generate do |c|
|
|
21
21
|
|
22
22
|
output_dir = 'slides'
|
23
23
|
|
24
|
-
|
24
|
+
slides_file = 'slides.haml' if File.exists? 'slides.haml'
|
25
|
+
slides_file = 'slides.slim' if File.exists? 'slides.slim'
|
25
26
|
|
26
27
|
config = RevealCK::Config.new config_file: 'config.toml'
|
27
28
|
|
@@ -29,7 +30,7 @@ command :generate do |c|
|
|
29
30
|
revealjs_files: revealjs_files,
|
30
31
|
image_files: image_files,
|
31
32
|
output_dir: output_dir,
|
32
|
-
|
33
|
+
slides_file: slides_file,
|
33
34
|
config: config
|
34
35
|
})
|
35
36
|
builder.build!
|
data/lib/reveal-ck.rb
CHANGED
@@ -3,7 +3,7 @@ require_relative 'reveal-ck/config'
|
|
3
3
|
require_relative 'reveal-ck/file_string_replacer'
|
4
4
|
require_relative 'reveal-ck/file_slicer'
|
5
5
|
require_relative 'reveal-ck/file_splicer'
|
6
|
-
require_relative 'reveal-ck/
|
6
|
+
require_relative 'reveal-ck/template_processor'
|
7
7
|
require_relative 'reveal-ck/build_task'
|
8
8
|
require_relative 'reveal-ck/builder'
|
9
9
|
require_relative 'reveal-ck/slide_builder'
|
@@ -7,12 +7,12 @@ module RevealCK
|
|
7
7
|
#
|
8
8
|
class PresentationBuilder < Builder
|
9
9
|
|
10
|
-
attr_reader :revealjs_files, :image_files, :
|
10
|
+
attr_reader :revealjs_files, :image_files, :slides_file, :config
|
11
11
|
attr_reader :tasks
|
12
12
|
|
13
13
|
def initialize(args)
|
14
14
|
@revealjs_files, @image_files = args[:revealjs_files], args[:image_files]
|
15
|
-
@
|
15
|
+
@slides_file = args[:slides_file]
|
16
16
|
@output_dir = args[:output_dir]
|
17
17
|
@config = args[:config]
|
18
18
|
end
|
@@ -36,10 +36,10 @@ module RevealCK
|
|
36
36
|
FileUtils.mkdir_p output_dir, verbose: false
|
37
37
|
}
|
38
38
|
|
39
|
-
add_task "Transforming #{
|
39
|
+
add_task "Transforming #{slides_file} into #{output_dir('slides_html')}'}",
|
40
40
|
lambda {
|
41
|
-
processor =
|
42
|
-
File.open(output_dir('slides.html'), 'w') { |f| f << processor.
|
41
|
+
processor = TemplateProcessor.open slides_file
|
42
|
+
File.open(output_dir('slides.html'), 'w') { |f| f << processor.output }
|
43
43
|
}
|
44
44
|
|
45
45
|
add_task "Bundling up the revealjs stuff into #{output_dir}/",
|
@@ -0,0 +1,29 @@
|
|
1
|
+
#
|
2
|
+
# Setup Slim
|
3
|
+
require 'slim'
|
4
|
+
::Slim::Engine.set_default_options pretty: true
|
5
|
+
|
6
|
+
module RevealCK
|
7
|
+
class TemplateProcessor
|
8
|
+
|
9
|
+
require 'tilt'
|
10
|
+
|
11
|
+
def initialize(file)
|
12
|
+
@template = Tilt.new file
|
13
|
+
end
|
14
|
+
|
15
|
+
def output(scope={}, locals = {})
|
16
|
+
@template.render scope, locals
|
17
|
+
end
|
18
|
+
|
19
|
+
def self.open(path)
|
20
|
+
file = if File.exists? path
|
21
|
+
path
|
22
|
+
else
|
23
|
+
File.expand_path(File.join(Dir.pwd, path))
|
24
|
+
end
|
25
|
+
TemplateProcessor.new file
|
26
|
+
end
|
27
|
+
|
28
|
+
end
|
29
|
+
end
|
data/lib/reveal-ck/version.rb
CHANGED
data/reveal.js/Gruntfile.js
CHANGED
@@ -17,7 +17,7 @@ module.exports = function(grunt) {
|
|
17
17
|
|
18
18
|
// Tests will be added soon
|
19
19
|
qunit: {
|
20
|
-
files: [ 'test
|
20
|
+
files: [ 'test/*.html' ]
|
21
21
|
},
|
22
22
|
|
23
23
|
uglify: {
|
@@ -109,6 +109,7 @@ module.exports = function(grunt) {
|
|
109
109
|
});
|
110
110
|
|
111
111
|
// Dependencies
|
112
|
+
grunt.loadNpmTasks( 'grunt-contrib-qunit' );
|
112
113
|
grunt.loadNpmTasks( 'grunt-contrib-jshint' );
|
113
114
|
grunt.loadNpmTasks( 'grunt-contrib-cssmin' );
|
114
115
|
grunt.loadNpmTasks( 'grunt-contrib-uglify' );
|
@@ -118,7 +119,7 @@ module.exports = function(grunt) {
|
|
118
119
|
grunt.loadNpmTasks( 'grunt-zip' );
|
119
120
|
|
120
121
|
// Default task
|
121
|
-
grunt.registerTask( 'default', [ 'jshint', 'cssmin', 'uglify' ] );
|
122
|
+
grunt.registerTask( 'default', [ 'jshint', 'cssmin', 'uglify', 'qunit' ] );
|
122
123
|
|
123
124
|
// Theme task
|
124
125
|
grunt.registerTask( 'themes', [ 'sass' ] );
|
@@ -129,4 +130,7 @@ module.exports = function(grunt) {
|
|
129
130
|
// Serve presentation locally
|
130
131
|
grunt.registerTask( 'serve', [ 'connect', 'watch' ] );
|
131
132
|
|
133
|
+
// Run tests
|
134
|
+
grunt.registerTask( 'test', [ 'jshint', 'qunit' ] );
|
135
|
+
|
132
136
|
};
|
data/reveal.js/README.md
CHANGED
@@ -52,10 +52,10 @@ This is based on [data-markdown](https://gist.github.com/1343518) from [Paul Iri
|
|
52
52
|
|
53
53
|
#### External Markdown
|
54
54
|
|
55
|
-
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.
|
55
|
+
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-charset``` attribute is optional and specifies which charset to use when loading the external file.
|
56
56
|
|
57
57
|
```html
|
58
|
-
<section data-markdown="example.md" data-separator="^\n\n\n" data-vertical="^\n\n"></section>
|
58
|
+
<section data-markdown="example.md" data-separator="^\n\n\n" data-vertical="^\n\n" data-notes="^Note:" data-charset="iso-8859-15"></section>
|
59
59
|
```
|
60
60
|
|
61
61
|
### Configuration
|
@@ -100,9 +100,6 @@ Reveal.initialize({
|
|
100
100
|
// Enable slide navigation via mouse wheel
|
101
101
|
mouseWheel: false,
|
102
102
|
|
103
|
-
// Apply a 3D roll to links on hover
|
104
|
-
rollingLinks: true,
|
105
|
-
|
106
103
|
// Transition style
|
107
104
|
transition: 'default', // default/cube/page/concave/zoom/linear/fade/none
|
108
105
|
|
@@ -110,7 +107,7 @@ Reveal.initialize({
|
|
110
107
|
transitionSpeed: 'default', // default/fast/slow
|
111
108
|
|
112
109
|
// Transition style for full page backgrounds
|
113
|
-
backgroundTransition: 'default' // default/linear
|
110
|
+
backgroundTransition: 'default' // default/linear/none
|
114
111
|
|
115
112
|
});
|
116
113
|
```
|
@@ -153,7 +150,10 @@ Reveal.initialize({
|
|
153
150
|
{ src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } },
|
154
151
|
|
155
152
|
// Remote control your reveal.js presentation using a touch device
|
156
|
-
{ src: 'plugin/remotes/remotes.js', async: true, condition: function() { return !!document.body.classList; } }
|
153
|
+
{ src: 'plugin/remotes/remotes.js', async: true, condition: function() { return !!document.body.classList; } },
|
154
|
+
|
155
|
+
// MathJax
|
156
|
+
{ src: 'plugin/math/math.js', async: true }
|
157
157
|
]
|
158
158
|
});
|
159
159
|
```
|
@@ -370,6 +370,8 @@ The display order of fragments can be controlled using the ```data-fragment-inde
|
|
370
370
|
|
371
371
|
When a slide fragment is either shown or hidden reveal.js will dispatch an event.
|
372
372
|
|
373
|
+
Some libraries, like MathJax (see #505), get confused by the initially hidden fragment elements. Often times this can be fixed by calling their update or render function from this callback.
|
374
|
+
|
373
375
|
```javascript
|
374
376
|
Reveal.addEventListener( 'fragmentshown', function( event ) {
|
375
377
|
// event.fragment = the fragment DOM element
|
@@ -398,7 +400,7 @@ By default, Reveal is configured with [highlight.js](http://softwaremaniacs.org/
|
|
398
400
|
|
399
401
|
### Overview mode
|
400
402
|
|
401
|
-
Press "Esc"
|
403
|
+
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,
|
402
404
|
as if you were at 1,000 feet above your presentation. The overview mode comes with a few API hooks:
|
403
405
|
|
404
406
|
```javascript
|
@@ -414,7 +416,7 @@ Just press »F« on your keyboard to show your presentation in fullscreen mode.
|
|
414
416
|
|
415
417
|
|
416
418
|
### Embedded media
|
417
|
-
Embedded HTML5 `<video>`/`<audio>` and YouTube iframes are automatically paused when
|
419
|
+
Embedded HTML5 `<video>`/`<audio>` and YouTube iframes are automatically paused when you navigate away from a slide. This can be disabled by decorating your element with a `data-ignore` attribute.
|
418
420
|
|
419
421
|
Add `data-autoplay` to your media element if you want it to automatically start playing when the slide is shown:
|
420
422
|
|
@@ -423,6 +425,21 @@ Add `data-autoplay` to your media element if you want it to automatically start
|
|
423
425
|
```
|
424
426
|
|
425
427
|
|
428
|
+
### Stretching elements
|
429
|
+
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:
|
430
|
+
|
431
|
+
```html
|
432
|
+
<section>
|
433
|
+
<h2>This video will use up the remaining space on the slide</h2>
|
434
|
+
<video class="stretch" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
|
435
|
+
</section>
|
436
|
+
```
|
437
|
+
|
438
|
+
Limitations:
|
439
|
+
- Only direct descendants of a slide section can be stretched
|
440
|
+
- Only one descendant per slide section can be stretched
|
441
|
+
|
442
|
+
|
426
443
|
## PDF Export
|
427
444
|
|
428
445
|
Presentations can be exported to PDF via a special print stylesheet. This feature requires that you use [Google Chrome](http://google.com/chrome).
|
@@ -461,7 +478,7 @@ If you want to add a theme of your own see the instructions here: [/css/theme/RE
|
|
461
478
|
|
462
479
|
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.
|
463
480
|
|
464
|
-
|
481
|
+
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.
|
465
482
|
|
466
483
|
```html
|
467
484
|
<section>
|
@@ -473,6 +490,20 @@ By default notes are written using standard HTML, see below, but you can add a `
|
|
473
490
|
</section>
|
474
491
|
```
|
475
492
|
|
493
|
+
If you're using the external Markdown plugin, you can add notes with the help of a special delimiter:
|
494
|
+
|
495
|
+
```html
|
496
|
+
<section data-markdown="example.md" data-separator="^\n\n\n" data-vertical="^\n\n" data-notes="^Note:"></section>
|
497
|
+
|
498
|
+
# Title
|
499
|
+
## Sub-title
|
500
|
+
|
501
|
+
Here is some content...
|
502
|
+
|
503
|
+
Note:
|
504
|
+
This will only display in the notes window.
|
505
|
+
```
|
506
|
+
|
476
507
|
## Server Side Speaker Notes
|
477
508
|
|
478
509
|
In some cases it can be desirable to run notes on a separate device from the one you're presenting on. The Node.js-based notes plugin lets you do this using the same note definitions as its client side counterpart. Include the required scripts by adding the following dependencies:
|
@@ -520,23 +551,24 @@ You can then access your master presentation at ```http://localhost:1947```
|
|
520
551
|
Example configuration:
|
521
552
|
```javascript
|
522
553
|
Reveal.initialize({
|
523
|
-
// other options
|
554
|
+
// other options...
|
524
555
|
|
525
556
|
multiplex: {
|
526
|
-
// Example values.
|
557
|
+
// Example values. To generate your own, see the socket.io server instructions.
|
527
558
|
secret: '13652805320794272084', // Obtained from the socket.io server. Gives this (the master) control of the presentation
|
528
559
|
id: '1ea875674b17ca76', // Obtained from socket.io server
|
529
560
|
url: 'revealjs.jit.su:80' // Location of socket.io server
|
530
561
|
},
|
531
562
|
|
532
|
-
//
|
563
|
+
// Don't forget to add the dependencies
|
533
564
|
dependencies: [
|
534
|
-
// other deps
|
535
565
|
{ src: '//cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.10/socket.io.min.js', async: true },
|
536
566
|
{ src: 'plugin/multiplex/master.js', async: true },
|
537
567
|
|
538
568
|
// and if you want speaker notes
|
539
569
|
{ src: 'plugin/notes-server/client.js', async: true }
|
570
|
+
|
571
|
+
// other dependencies...
|
540
572
|
]
|
541
573
|
});
|
542
574
|
```
|
@@ -547,20 +579,21 @@ Served from a publicly accessible static file server. Examples include: GitHub P
|
|
547
579
|
Example configuration:
|
548
580
|
```javascript
|
549
581
|
Reveal.initialize({
|
550
|
-
// other options
|
582
|
+
// other options...
|
551
583
|
|
552
584
|
multiplex: {
|
553
|
-
// Example values.
|
585
|
+
// Example values. To generate your own, see the socket.io server instructions.
|
554
586
|
secret: null, // null so the clients do not have control of the master presentation
|
555
587
|
id: '1ea875674b17ca76', // id, obtained from socket.io server
|
556
588
|
url: 'revealjs.jit.su:80' // Location of socket.io server
|
557
589
|
},
|
558
590
|
|
559
|
-
//
|
591
|
+
// Don't forget to add the dependencies
|
560
592
|
dependencies: [
|
561
|
-
// other deps
|
562
593
|
{ src: '//cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.10/socket.io.min.js', async: true },
|
563
594
|
{ src: 'plugin/multiplex/client.js', async: true }
|
595
|
+
|
596
|
+
// other dependencies...
|
564
597
|
]
|
565
598
|
});
|
566
599
|
```
|
@@ -584,20 +617,21 @@ The socket.io server can play the role of static file server for your client pre
|
|
584
617
|
Example configuration:
|
585
618
|
```javascript
|
586
619
|
Reveal.initialize({
|
587
|
-
// other options
|
620
|
+
// other options...
|
588
621
|
|
589
622
|
multiplex: {
|
590
|
-
// Example values.
|
623
|
+
// Example values. To generate your own, see the socket.io server instructions.
|
591
624
|
secret: null, // null so the clients do not have control of the master presentation
|
592
625
|
id: '1ea875674b17ca76', // id, obtained from socket.io server
|
593
626
|
url: 'example.com:80' // Location of your socket.io server
|
594
627
|
},
|
595
628
|
|
596
|
-
//
|
629
|
+
// Don't forget to add the dependencies
|
597
630
|
dependencies: [
|
598
|
-
// other deps
|
599
631
|
{ src: '//cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.10/socket.io.min.js', async: true },
|
600
632
|
{ src: 'plugin/multiplex/client.js', async: true }
|
633
|
+
|
634
|
+
// other dependencies...
|
601
635
|
]
|
602
636
|
```
|
603
637
|
|
@@ -606,28 +640,102 @@ It can also play the role of static file server for your master presentation and
|
|
606
640
|
Example configuration:
|
607
641
|
```javascript
|
608
642
|
Reveal.initialize({
|
609
|
-
// other options
|
643
|
+
// other options...
|
610
644
|
|
611
645
|
multiplex: {
|
612
|
-
// Example values.
|
646
|
+
// Example values. To generate your own, see the socket.io server instructions.
|
613
647
|
secret: '13652805320794272084', // Obtained from the socket.io server. Gives this (the master) control of the presentation
|
614
648
|
id: '1ea875674b17ca76', // Obtained from socket.io server
|
615
649
|
url: 'example.com:80' // Location of your socket.io server
|
616
650
|
},
|
617
651
|
|
618
|
-
//
|
652
|
+
// Don't forget to add the dependencies
|
619
653
|
dependencies: [
|
620
|
-
// other deps
|
621
654
|
{ src: '//cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.10/socket.io.min.js', async: true },
|
622
655
|
{ src: 'plugin/multiplex/master.js', async: true },
|
623
656
|
{ src: 'plugin/multiplex/client.js', async: true }
|
657
|
+
|
658
|
+
// other dependencies...
|
624
659
|
]
|
625
660
|
});
|
626
661
|
```
|
627
662
|
|
663
|
+
## Leap Motion
|
664
|
+
The Leap Motion plugin lets you utilize your [Leap Motion](https://www.leapmotion.com/) device to control basic navigation of your presentation. The gestures currently supported are:
|
665
|
+
|
666
|
+
##### 1 to 2 fingers
|
667
|
+
Pointer — Point to anything on screen. Move your finger past the device to expand the pointer.
|
668
|
+
|
669
|
+
##### 1 hand + 3 or more fingers (left/right/up/down)
|
670
|
+
Navigate through your slides. See config options to invert movements.
|
671
|
+
|
672
|
+
##### 2 hands upwards
|
673
|
+
Toggle the overview mode. Do it a second time to exit the overview.
|
674
|
+
|
675
|
+
#### Config Options
|
676
|
+
You can edit the following options:
|
677
|
+
|
678
|
+
| Property | Default | Description
|
679
|
+
| ----------------- |:-----------------:| :-------------
|
680
|
+
| autoCenter | true | Center the pointer based on where you put your finger into the leap motions detection field.
|
681
|
+
| gestureDelay | 500 | How long to delay between gestures in milliseconds.
|
682
|
+
| naturalSwipe | true | Swipe as though you were touching a touch screen. Set to false to invert.
|
683
|
+
| pointerColor | #00aaff | The color of the pointer.
|
684
|
+
| pointerOpacity | 0.7 | The opacity of the pointer.
|
685
|
+
| pointerSize | 15 | The minimum height and width of the pointer.
|
686
|
+
| pointerTolerance | 120 | Bigger = slower pointer.
|
687
|
+
|
688
|
+
|
689
|
+
Example configuration:
|
690
|
+
```js
|
691
|
+
Reveal.initialize({
|
692
|
+
|
693
|
+
// other options...
|
694
|
+
|
695
|
+
leap: {
|
696
|
+
naturalSwipe : false, // Invert swipe gestures
|
697
|
+
pointerOpacity : 0.5, // Set pointer opacity to 0.5
|
698
|
+
pointerColor : '#d80000' // Red pointer
|
699
|
+
},
|
700
|
+
|
701
|
+
dependencies: [
|
702
|
+
{ src: 'plugin/leap/leap.js', async: true }
|
703
|
+
]
|
704
|
+
|
705
|
+
});
|
706
|
+
```
|
707
|
+
|
708
|
+
## MathJax
|
709
|
+
|
710
|
+
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).
|
711
|
+
|
712
|
+
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.
|
713
|
+
|
714
|
+
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.
|
715
|
+
|
716
|
+
```js
|
717
|
+
Reveal.initialize({
|
718
|
+
|
719
|
+
// other options ...
|
720
|
+
|
721
|
+
math: {
|
722
|
+
mathjax: 'http://cdn.mathjax.org/mathjax/latest/MathJax.js',
|
723
|
+
config: 'TeX-AMS_HTML-full' // See http://docs.mathjax.org/en/latest/config-files.html
|
724
|
+
},
|
725
|
+
|
726
|
+
dependencies: [
|
727
|
+
{ src: 'plugin/math/math.js', async: true }
|
728
|
+
]
|
729
|
+
|
730
|
+
});
|
731
|
+
```
|
732
|
+
|
733
|
+
Read MathJax's documentation if you need [HTTPS delivery](http://docs.mathjax.org/en/latest/start.html#secure-access-to-the-cdn) or serving of [specific versions](http://docs.mathjax.org/en/latest/configuration.html#loading-mathjax-from-the-cdn) for stability.
|
734
|
+
|
735
|
+
|
628
736
|
## Installation
|
629
737
|
|
630
|
-
The **basic setup** is for authoring presentations only. The **full setup** gives you access to all reveal.js features as well as the development tasks needed to make changes to the source.
|
738
|
+
The **basic setup** is for authoring presentations only. The **full setup** gives you access to all reveal.js features and plugins such as speaker notes as well as the development tasks needed to make changes to the source.
|
631
739
|
|
632
740
|
### Basic setup
|
633
741
|
|
@@ -648,22 +756,22 @@ Some reveal.js features, like external markdown, require that presentations run
|
|
648
756
|
|
649
757
|
2. Install [Grunt](http://gruntjs.com/getting-started#installing-the-cli)
|
650
758
|
|
651
|
-
4. Clone the reveal.js repository
|
759
|
+
4. Clone the reveal.js repository
|
652
760
|
```
|
653
761
|
$ git clone git@github.com:hakimel/reveal.js.git
|
654
762
|
```
|
655
763
|
|
656
|
-
5. Navigate to the reveal.js folder
|
764
|
+
5. Navigate to the reveal.js folder
|
657
765
|
```
|
658
766
|
$ cd reveal.js
|
659
767
|
```
|
660
768
|
|
661
|
-
6. Install dependencies
|
769
|
+
6. Install dependencies
|
662
770
|
```
|
663
771
|
$ npm install
|
664
772
|
```
|
665
773
|
|
666
|
-
7. Serve the presentation and monitor source files for changes
|
774
|
+
7. Serve the presentation and monitor source files for changes
|
667
775
|
```
|
668
776
|
$ grunt serve
|
669
777
|
```
|