reveal-ck 0.1.3 → 0.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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
|
```
|