blob: 3cd2722452090e7515f9c69f1ed74c7929e041f3 [file] [log] [blame]
JJ Allaire5dc9fe02016-01-30 18:44:51 -05001---
2title: "R Markdown Format for reveal.js Presentations"
3output:
4 github_document:
5 toc: true
6 toc_depth: 3
7---
8
9## Overview
10
11This repository provides an [R Markdown](http://rmarkdown.rstudio.com) custom format for [reveal.js](http://lab.hakim.se/reveal-js/#/) HTML presentations.
12
13You can use this format in R Markdown documents by installing this package as follows:
14
15```r
16devtools::install_github("jjallaire/revealjs")
17```
18
19
20To create a [reveal.js](http://lab.hakim.se/reveal-js/#/) presentation from R Markdown you specify the `revealjs_presentation` output format in the front-matter of your document. You can create a slide show broken up into sections by using the `#` and `##` heading tags (you can also create a new slide without a header using a horizontal rule (`----`). For example here's a simple slide show:
21
22 ---
23 title: "Habits"
24 author: John Doe
25 date: March 22, 2005
26 output: revealjs::revealjs_presentation
27 ---
28
29 # In the morning
30
31 ## Getting up
32
33 - Turn off alarm
34 - Get out of bed
35
36 ## Breakfast
37
38 - Eat eggs
39 - Drink coffee
40
41 # In the evening
42
43 ## Dinner
44
45 - Eat spaghetti
46 - Drink wine
47
48 ## Going to sleep
49
50 - Get in bed
51 - Count sheep
52
53## Display Modes
54
55The following single character keyboard shortcuts enable alternate
56display modes:
57
58- `'f'` enable fullscreen mode
59
60- `'o'` enable overview mode
61
62Pressing `Esc` exits all of these modes.
63
64## Incremental Bullets
65
66You can render bullets incrementally by adding the `incremental` option:
67
68 ---
69 output:
70 revealjs::revealjs_presentation:
71 incremental: true
72 ---
73
74If you want to render bullets incrementally for some slides but not
75others you can use this syntax:
76
77 > - Eat eggs
78 > - Drink coffee
79
80## Appearance and Style
81
82There are several options that control the appearance of revealjs presentations:
83
84* `theme` specifies the theme to use for the presentation (available themes are "default", "simple", "sky", "beige", "serif", "solarized", "blood", "moon", "night", "black", "league" or "white").
85
86* `transition` specifies the visual effect when moving between slides. Available transitions are "default", "fade", "slide", "convex", "concave", "zoom" or "none".
87
88* `background_transition` specifies the background transition effect when moving between full page slides. Available transitions are "default", "fade", "slide", "convex", "concave", "zoom" or "none".
89
90* `highlight` specifies the syntax highlighting style. Supported styles include "default", "tango", "pygments", "kate", "monochrome", "espresso", "zenburn", and "haddock". Pass null to prevent syntax highlighting.
91
92* `center` specifies whether you want to vertically center content on slides (this defaults to false).
93
94* `smart` indicates whether to produce typographically correct output, converting straight quotes to curly quotes, `---` to em-dashes, `--` to en-dashes, and `...` to ellipses. Note that `smart` is enabled by default.
95
96For example:
97
98 ---
99 output:
100 revealjs::revealjs_presentation:
101 theme: sky
102 transition: fade
103 highlight: pygments
104 center: true
105 ---
106
JJ Allaire8382c3e2016-01-30 19:04:31 -0500107## Slide Backgrounds
108
109Slides 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 slide header element. Four different types of backgrounds are supported: color, image, video and iframe. Below are a few examples.
110
111 ## CSS color background {data-background=#ff0000}
112
113 ## Full size image background {data-background="background.jpeg"}
114
115 ## Video background {data-background-video="background.mp4"}
116
117 ## Embed a web page as a background {data-background-iframe="https://example.com"}
118
119Backgrounds transition using a fade animation by default. This can be changed to a linear sliding transition by specifying the `background-transition: slide`. Alternatively you can set data-background-transition on any slide with a background to override that specific transition.
120
JJ Allaire5dc9fe02016-01-30 18:44:51 -0500121## Reveal.js Options
122
123Reveal.js has many additional options to conigure it's behavior. You can specify any of these options using `reveal_options`, for example:
124
125 ---
126 title: "Habits"
127 output:
128 revealjs::revealjs_presentation:
129 self_contained: false
130 reveal_options:
131 slideNumber: true
132 previewLinks: true
133 ---
134
135You can find documentation on the various available Reveal.js options here: <https://github.com/hakimel/reveal.js#configuration>.
136
137
138## Figure Options
139
140There are a number of options that affect the output of figures within reveal.js presentations:
141
142* `fig_width` and `fig_height` can be used to control the default figure width and height (7x5 is used by default)
143
144* `fig_retina` Specifies the scaling to perform for retina displays (defaults to 2, which currently works for all widely used retina displays). Note that this only takes effect if you are using knitr >= 1.5.21. Set to `null` to prevent retina scaling.
145
146* `fig_caption` controls whether figures are rendered with captions
147
148For example:
149
150 ---
151 title: "Habits"
152 output:
153 revealjs::revealjs_presentation:
154 fig_width: 7
155 fig_height: 6
156 fig_caption: true
157 ---
158
159
160## MathJax Equations
161
162By default [MathJax](http://www.mathjax.org/) scripts are included in reveal.js presentations for rendering LaTeX and MathML equations. You can use the `mathjax` option to control how MathJax is included:
163
164* Specify "default" to use an https URL from the official MathJax CDN.
165
166* Specify "local" to use a local version of MathJax (which is copied into the output directory). Note that when using "local" you also need to set the `self_contained` option to false.
167
168* Specify an alternate URL to load MathJax from another location.
169
170* Specify null to exclude MathJax entirely.
171
172For example, to use a local copy of MathJax:
173
174 ---
175 title: "Habits"
176 output:
177 revealjs::revealjs_presentation:
178 mathjax: local
179 self_contained: false
180 ---
181
182To use a self-hosted copy of MathJax:
183
184 ---
185 title: "Habits"
186 output:
187 revealjs::revealjs_presentation:
188 mathjax: "http://example.com/mathjax/MathJax.js?config=TeX-AMS-MML_HTMLorMML"
189 ---
190
191To exclude MathJax entirely:
192
193 ---
194 title: "Habits"
195 output:
196 revealjs::revealjs_presentation:
197 mathjax: null
198 ---
199
200## Document Dependencies
201
202By default R Markdown produces standalone HTML files with no external dependencies, using data: URIs to incorporate the contents of linked scripts, stylesheets, images, and videos. This means you can share or publish the file just like you share Office documents or PDFs. If you'd rather have keep depenencies in external files you can specify `self_contained: false`. For example:
203
204 ---
205 title: "Habits"
206 output:
207 revealjs::revealjs_presentation:
208 self_contained: false
209 ---
210
211Note that even for self contained documents MathJax is still loaded externally (this is necessary because of it's size). If you want to serve MathJax locally then you should specify `mathjax: local` and `self_contained: false`.
212
213One common reason keep dependencies external is for serving R Markdown documents from a website (external dependencies can be cached separately by browsers leading to faster page load times). In the case of serving multiple R Markdown documents you may also want to consolidate dependent library files (e.g. Bootstrap, MathJax, etc.) into a single directory shared by multiple documents. You can use the `lib_dir` option to do this, for example:
214
215 ---
216 title: "Habits"
217 output:
218 revealjs::revealjs_presentation:
219 self_contained: false
220 lib_dir: libs
221 ---
222
223## Advanced Customization
224
225### Includes
226
227You can do more advanced customization of output by including additional HTML content or by replacing the core pandoc template entirely. To include content in the document header or before/after the document body you use the `includes` option as follows:
228
229 ---
230 title: "Habits"
231 output:
232 revealjs::revealjs_presentation:
233 includes:
234 in_header: header.html
235 before_body: doc_prefix.html
236 after_body: doc_suffix.html
237 ---
238
239
240### Pandoc Arguments
241
242If there are pandoc features you want to use that lack equivilants in the YAML options described above you can still use them by passing custom `pandoc_args`. For example:
243
244 ---
245 title: "Habits"
246 output:
247 revealjs::revealjs_presentation:
248 pandoc_args: [
249 "--title-prefix", "Foo",
250 "--id-prefix", "Bar"
251 ]
252 ---
253
254Documentation on all available pandoc arguments can be found in the [pandoc user guide](http://johnmacfarlane.net/pandoc/README.html#options).
255
256## Shared Options
257
258If you want to specify a set of default options to be shared by multiple documents within a directory you can include a file named `_output.yaml` within the directory. Note that no YAML delimeters or enclosing output object are used in this file. For example:
259
260**\_output.yaml**
261
262```yaml
263revealjs::revealjs_presentation:
264 theme: sky
265 transition: fade
266 highlight: pygments
267```
268
269All documents located in the same directory as `_output.yaml` will inherit it's options. Options defined explicitly within documents will override those specified in the shared options file.
270
271
272
273
274
275
276
277
278
279
280