github.com/sentienttechnologies/studio-go-runner@v0.0.0-20201118202441-6d21f2ced8ee/docs/slides/README.md (about) 1 # reveal.js [](https://travis-ci.org/hakimel/reveal.js) <a href="https://slides.com?ref=github"><img src="https://s3.amazonaws.com/static.slid.es/images/slides-github-banner-320x40.png?1" alt="Slides" width="160" height="20"></a> 2 3 A framework for easily creating beautiful presentations using HTML. [Check out the live demo](http://revealjs.com/). 4 5 reveal.js comes with a broad range of features including [nested slides](https://github.com/hakimel/reveal.js#markup), [Markdown contents](https://github.com/hakimel/reveal.js#markdown), [PDF export](https://github.com/hakimel/reveal.js#pdf-export), [speaker notes](https://github.com/hakimel/reveal.js#speaker-notes) and a [JavaScript API](https://github.com/hakimel/reveal.js#api). There's also a fully featured visual editor and platform for sharing reveal.js presentations at [slides.com](https://slides.com?ref=github). 6 7 ## Table of contents 8 - [Online Editor](#online-editor) 9 - [Instructions](#instructions) 10 - [Markup](#markup) 11 - [Markdown](#markdown) 12 - [Element Attributes](#element-attributes) 13 - [Slide Attributes](#slide-attributes) 14 - [Configuration](#configuration) 15 - [Presentation Size](#presentation-size) 16 - [Dependencies](#dependencies) 17 - [Ready Event](#ready-event) 18 - [Auto-sliding](#auto-sliding) 19 - [Keyboard Bindings](#keyboard-bindings) 20 - [Touch Navigation](#touch-navigation) 21 - [Lazy Loading](#lazy-loading) 22 - [API](#api) 23 - [Slide Changed Event](#slide-changed-event) 24 - [Presentation State](#presentation-state) 25 - [Slide States](#slide-states) 26 - [Slide Backgrounds](#slide-backgrounds) 27 - [Parallax Background](#parallax-background) 28 - [Slide Transitions](#slide-transitions) 29 - [Internal links](#internal-links) 30 - [Fragments](#fragments) 31 - [Fragment events](#fragment-events) 32 - [Code syntax highlighting](#code-syntax-highlighting) 33 - [Slide number](#slide-number) 34 - [Overview mode](#overview-mode) 35 - [Fullscreen mode](#fullscreen-mode) 36 - [Embedded media](#embedded-media) 37 - [Stretching elements](#stretching-elements) 38 - [postMessage API](#postmessage-api) 39 - [PDF Export](#pdf-export) 40 - [Theming](#theming) 41 - [Speaker Notes](#speaker-notes) 42 - [Share and Print Speaker Notes](#share-and-print-speaker-notes) 43 - [Server Side Speaker Notes](#server-side-speaker-notes) 44 - [Multiplexing](#multiplexing) 45 - [Master presentation](#master-presentation) 46 - [Client presentation](#client-presentation) 47 - [Socket.io server](#socketio-server) 48 - [MathJax](#mathjax) 49 - [Installation](#installation) 50 - [Basic setup](#basic-setup) 51 - [Full setup](#full-setup) 52 - [Folder Structure](#folder-structure) 53 - [License](#license) 54 55 #### More reading 56 - [Changelog](https://github.com/hakimel/reveal.js/releases): Up-to-date version history. 57 - [Examples](https://github.com/hakimel/reveal.js/wiki/Example-Presentations): Presentations created with reveal.js, add your own! 58 - [Browser Support](https://github.com/hakimel/reveal.js/wiki/Browser-Support): Explanation of browser support and fallbacks. 59 - [Plugins](https://github.com/hakimel/reveal.js/wiki/Plugins,-Tools-and-Hardware): A list of plugins that can be used to extend reveal.js. 60 61 ## Online Editor 62 63 Presentations are written using HTML or Markdown but there's also an online editor for those of you who prefer a graphical interface. Give it a try at [https://slides.com](https://slides.com?ref=github). 64 65 66 ## Instructions 67 68 ### Markup 69 70 Here's a barebones example of a fully working reveal.js presentation: 71 ```html 72 <html> 73 <head> 74 <link rel="stylesheet" href="css/reveal.css"> 75 <link rel="stylesheet" href="css/theme/white.css"> 76 </head> 77 <body> 78 <div class="reveal"> 79 <div class="slides"> 80 <section>Slide 1</section> 81 <section>Slide 2</section> 82 </div> 83 </div> 84 <script src="js/reveal.js"></script> 85 <script> 86 Reveal.initialize(); 87 </script> 88 </body> 89 </html> 90 ``` 91 92 The presentation markup hierarchy needs to be `.reveal > .slides > section` where the `section` represents one slide and can be repeated indefinitely. If you place multiple `section` elements inside of another `section` they will be shown as vertical slides. The first of the vertical slides is the "root" of the others (at the top), and will be included in the horizontal sequence. For example: 93 94 ```html 95 <div class="reveal"> 96 <div class="slides"> 97 <section>Single Horizontal Slide</section> 98 <section> 99 <section>Vertical Slide 1</section> 100 <section>Vertical Slide 2</section> 101 </section> 102 </div> 103 </div> 104 ``` 105 106 ### Markdown 107 108 It's possible to write your slides using Markdown. To enable Markdown, add the `data-markdown` attribute to your `<section>` elements and wrap the contents in a `<textarea data-template>` like the example below. You'll also need to add the `plugin/markdown/marked.js` and `plugin/markdown/markdown.js` scripts (in that order) to your HTML file. 109 110 This is based on [data-markdown](https://gist.github.com/1343518) from [Paul Irish](https://github.com/paulirish) modified to use [marked](https://github.com/chjj/marked) to support [GitHub Flavored Markdown](https://help.github.com/articles/github-flavored-markdown). Sensitive to indentation (avoid mixing tabs and spaces) and line breaks (avoid consecutive breaks). 111 112 ```html 113 <section data-markdown> 114 <textarea data-template> 115 ## Page title 116 117 A paragraph with some text and a [link](http://hakim.se). 118 </textarea> 119 </section> 120 ``` 121 122 #### External Markdown 123 124 You can write your content as a separate file and have reveal.js load it at runtime. Note the separator arguments which determine how slides are delimited in the external file: the `data-separator` attribute defines a regular expression for horizontal slides (defaults to `^\r?\n---\r?\n$`, a newline-bounded horizontal rule) and `data-separator-vertical` defines vertical slides (disabled by default). The `data-separator-notes` attribute is a regular expression for specifying the beginning of the current slide's speaker notes (defaults to `note:`). The `data-charset` attribute is optional and specifies which charset to use when loading the external file. 125 126 When used locally, this feature requires that reveal.js [runs from a local web server](#full-setup). The following example customises all available options: 127 128 ```html 129 <section data-markdown="example.md" 130 data-separator="^\n\n\n" 131 data-separator-vertical="^\n\n" 132 data-separator-notes="^Note:" 133 data-charset="iso-8859-15"> 134 </section> 135 ``` 136 137 #### Element Attributes 138 139 Special syntax (in html comment) is available for adding attributes to Markdown elements. This is useful for fragments, amongst other things. 140 141 ```html 142 <section data-markdown> 143 <script type="text/template"> 144 - Item 1 <!-- .element: class="fragment" data-fragment-index="2" --> 145 - Item 2 <!-- .element: class="fragment" data-fragment-index="1" --> 146 </script> 147 </section> 148 ``` 149 150 #### Slide Attributes 151 152 Special syntax (in html comment) is available for adding attributes to the slide `<section>` elements generated by your Markdown. 153 154 ```html 155 <section data-markdown> 156 <script type="text/template"> 157 <!-- .slide: data-background="#ff0000" --> 158 Markdown content 159 </script> 160 </section> 161 ``` 162 163 #### Configuring *marked* 164 165 We use [marked](https://github.com/chjj/marked) to parse Markdown. To customise marked's rendering, you can pass in options when [configuring Reveal](#configuration): 166 167 ```javascript 168 Reveal.initialize({ 169 // Options which are passed into marked 170 // See https://github.com/chjj/marked#options-1 171 markdown: { 172 smartypants: true 173 } 174 }); 175 ``` 176 177 ### Configuration 178 179 At the end of your page you need to initialize reveal by running the following code. Note that all config values are optional and will default as specified below. 180 181 ```javascript 182 Reveal.initialize({ 183 184 // Display presentation control arrows 185 controls: true, 186 187 // Help the user learn the controls by providing hints, for example by 188 // bouncing the down arrow when they first encounter a vertical slide 189 controlsTutorial: true, 190 191 // Determines where controls appear, "edges" or "bottom-right" 192 controlsLayout: 'bottom-right', 193 194 // Visibility rule for backwards navigation arrows; "faded", "hidden" 195 // or "visible" 196 controlsBackArrows: 'faded', 197 198 // Display a presentation progress bar 199 progress: true, 200 201 // Set default timing of 2 minutes per slide 202 defaultTiming: 120, 203 204 // Display the page number of the current slide 205 slideNumber: false, 206 207 // Push each slide change to the browser history 208 history: false, 209 210 // Enable keyboard shortcuts for navigation 211 keyboard: true, 212 213 // Enable the slide overview mode 214 overview: true, 215 216 // Vertical centering of slides 217 center: true, 218 219 // Enables touch navigation on devices with touch input 220 touch: true, 221 222 // Loop the presentation 223 loop: false, 224 225 // Change the presentation direction to be RTL 226 rtl: false, 227 228 // Randomizes the order of slides each time the presentation loads 229 shuffle: false, 230 231 // Turns fragments on and off globally 232 fragments: true, 233 234 // Flags if the presentation is running in an embedded mode, 235 // i.e. contained within a limited portion of the screen 236 embedded: false, 237 238 // Flags if we should show a help overlay when the questionmark 239 // key is pressed 240 help: true, 241 242 // Flags if speaker notes should be visible to all viewers 243 showNotes: false, 244 245 // Global override for autoplaying embedded media (video/audio/iframe) 246 // - null: Media will only autoplay if data-autoplay is present 247 // - true: All media will autoplay, regardless of individual setting 248 // - false: No media will autoplay, regardless of individual setting 249 autoPlayMedia: null, 250 251 // Number of milliseconds between automatically proceeding to the 252 // next slide, disabled when set to 0, this value can be overwritten 253 // by using a data-autoslide attribute on your slides 254 autoSlide: 0, 255 256 // Stop auto-sliding after user input 257 autoSlideStoppable: true, 258 259 // Use this method for navigation when auto-sliding 260 autoSlideMethod: Reveal.navigateNext, 261 262 // Enable slide navigation via mouse wheel 263 mouseWheel: false, 264 265 // Hides the address bar on mobile devices 266 hideAddressBar: true, 267 268 // Opens links in an iframe preview overlay 269 previewLinks: false, 270 271 // Transition style 272 transition: 'slide', // none/fade/slide/convex/concave/zoom 273 274 // Transition speed 275 transitionSpeed: 'default', // default/fast/slow 276 277 // Transition style for full page slide backgrounds 278 backgroundTransition: 'fade', // none/fade/slide/convex/concave/zoom 279 280 // Number of slides away from the current that are visible 281 viewDistance: 3, 282 283 // Parallax background image 284 parallaxBackgroundImage: '', // e.g. "'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg'" 285 286 // Parallax background size 287 parallaxBackgroundSize: '', // CSS syntax, e.g. "2100px 900px" 288 289 // Number of pixels to move the parallax background per slide 290 // - Calculated automatically unless specified 291 // - Set to 0 to disable movement along an axis 292 parallaxBackgroundHorizontal: null, 293 parallaxBackgroundVertical: null, 294 295 // The display mode that will be used to show slides 296 display: 'block' 297 298 }); 299 ``` 300 301 302 The configuration can be updated after initialization using the ```configure``` method: 303 304 ```javascript 305 // Turn autoSlide off 306 Reveal.configure({ autoSlide: 0 }); 307 308 // Start auto-sliding every 5s 309 Reveal.configure({ autoSlide: 5000 }); 310 ``` 311 312 313 ### Presentation Size 314 315 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. 316 317 See below for a list of configuration options related to sizing, including default values: 318 319 ```javascript 320 Reveal.initialize({ 321 322 ... 323 324 // The "normal" size of the presentation, aspect ratio will be preserved 325 // when the presentation is scaled to fit different resolutions. Can be 326 // specified using percentage units. 327 width: 960, 328 height: 700, 329 330 // Factor of the display size that should remain empty around the content 331 margin: 0.1, 332 333 // Bounds for smallest/largest possible scale to apply to content 334 minScale: 0.2, 335 maxScale: 1.5 336 337 }); 338 ``` 339 340 If you wish to disable this behavior and do your own scaling (e.g. using media queries), try these settings: 341 342 ```javascript 343 Reveal.initialize({ 344 345 ... 346 347 width: "100%", 348 height: "100%", 349 margin: 0, 350 minScale: 1, 351 maxScale: 1 352 }); 353 ``` 354 355 ### Dependencies 356 357 Reveal.js doesn't _rely_ on any third party scripts to work but a few optional libraries are included by default. These libraries are loaded as dependencies in the order they appear, for example: 358 359 ```javascript 360 Reveal.initialize({ 361 dependencies: [ 362 // Cross-browser shim that fully implements classList - https://github.com/eligrey/classList.js/ 363 { src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } }, 364 365 // Interpret Markdown in <section> elements 366 { src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, 367 { src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, 368 369 // Syntax highlight for <code> elements 370 { src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }, 371 372 // Zoom in and out with Alt+click 373 { src: 'plugin/zoom-js/zoom.js', async: true }, 374 375 // Speaker notes 376 { src: 'plugin/notes/notes.js', async: true }, 377 378 // MathJax 379 { src: 'plugin/math/math.js', async: true } 380 ] 381 }); 382 ``` 383 384 You can add your own extensions using the same syntax. The following properties are available for each dependency object: 385 - **src**: Path to the script to load 386 - **async**: [optional] Flags if the script should load after reveal.js has started, defaults to false 387 - **callback**: [optional] Function to execute when the script has loaded 388 - **condition**: [optional] Function which must return true for the script to be loaded 389 390 To load these dependencies, reveal.js requires [head.js](http://headjs.com/) *(a script loading library)* to be loaded before reveal.js. 391 392 ### Ready Event 393 394 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()`. 395 396 ```javascript 397 Reveal.addEventListener( 'ready', function( event ) { 398 // event.currentSlide, event.indexh, event.indexv 399 } ); 400 ``` 401 402 Note that we also add a `.ready` class to the `.reveal` element so that you can hook into this with CSS. 403 404 ### Auto-sliding 405 406 Presentations can be configured to progress through slides automatically, without any user input. To enable this you will need to tell the framework how many milliseconds it should wait between slides: 407 408 ```javascript 409 // Slide every five seconds 410 Reveal.configure({ 411 autoSlide: 5000 412 }); 413 ``` 414 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. 415 416 You can also override the slide duration for individual slides and fragments by using the ```data-autoslide``` attribute: 417 418 ```html 419 <section data-autoslide="2000"> 420 <p>After 2 seconds the first fragment will be shown.</p> 421 <p class="fragment" data-autoslide="10000">After 10 seconds the next fragment will be shown.</p> 422 <p class="fragment">Now, the fragment is displayed for 2 seconds before the next slide is shown.</p> 423 </section> 424 ``` 425 426 To override the method used for navigation when auto-sliding, you can specify the ```autoSlideMethod``` setting. To only navigate along the top layer and ignore vertical slides, set this to ```Reveal.navigateRight```. 427 428 Whenever the auto-slide mode is resumed or paused the ```autoslideresumed``` and ```autoslidepaused``` events are fired. 429 430 431 ### Keyboard Bindings 432 433 If you're unhappy with any of the default keyboard bindings you can override them using the ```keyboard``` config option: 434 435 ```javascript 436 Reveal.configure({ 437 keyboard: { 438 13: 'next', // go to the next slide when the ENTER key is pressed 439 27: function() {}, // do something custom when ESC is pressed 440 32: null // don't do anything when SPACE is pressed (i.e. disable a reveal.js default binding) 441 } 442 }); 443 ``` 444 445 ### Touch Navigation 446 447 You can swipe to navigate through a presentation on any touch-enabled device. Horizontal swipes change between horizontal slides, vertical swipes change between vertical slides. If you wish to disable this you can set the `touch` config option to false when initializing reveal.js. 448 449 If there's some part of your content that needs to remain accessible to touch events you'll need to highlight this by adding a `data-prevent-swipe` attribute to the element. One common example where this is useful is elements that need to be scrolled. 450 451 452 ### Lazy Loading 453 454 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. 455 456 To enable lazy loading all you need to do is change your "src" attributes to "data-src" as shown below. This is supported for image, video, audio and iframe elements. Lazy loaded iframes will also unload when the containing slide is no longer visible. 457 458 ```html 459 <section> 460 <img data-src="image.png"> 461 <iframe data-src="http://hakim.se"></iframe> 462 <video> 463 <source data-src="video.webm" type="video/webm" /> 464 <source data-src="video.mp4" type="video/mp4" /> 465 </video> 466 </section> 467 ``` 468 469 470 ### API 471 472 The ``Reveal`` object exposes a JavaScript API for controlling navigation and reading state: 473 474 ```javascript 475 // Navigation 476 Reveal.slide( indexh, indexv, indexf ); 477 Reveal.left(); 478 Reveal.right(); 479 Reveal.up(); 480 Reveal.down(); 481 Reveal.prev(); 482 Reveal.next(); 483 Reveal.prevFragment(); 484 Reveal.nextFragment(); 485 486 // Randomize the order of slides 487 Reveal.shuffle(); 488 489 // Toggle presentation states, optionally pass true/false to force on/off 490 Reveal.toggleOverview(); 491 Reveal.togglePause(); 492 Reveal.toggleAutoSlide(); 493 494 // Shows a help overlay with keyboard shortcuts, optionally pass true/false 495 // to force on/off 496 Reveal.toggleHelp(); 497 498 // Change a config value at runtime 499 Reveal.configure({ controls: true }); 500 501 // Returns the present configuration options 502 Reveal.getConfig(); 503 504 // Fetch the current scale of the presentation 505 Reveal.getScale(); 506 507 // Retrieves the previous and current slide elements 508 Reveal.getPreviousSlide(); 509 Reveal.getCurrentSlide(); 510 511 Reveal.getIndices(); // { h: 0, v: 0 } } 512 Reveal.getPastSlideCount(); 513 Reveal.getProgress(); // (0 == first slide, 1 == last slide) 514 Reveal.getSlides(); // Array of all slides 515 Reveal.getTotalSlides(); // total number of slides 516 517 // Returns the speaker notes for the current slide 518 Reveal.getSlideNotes(); 519 520 // State checks 521 Reveal.isFirstSlide(); 522 Reveal.isLastSlide(); 523 Reveal.isOverview(); 524 Reveal.isPaused(); 525 Reveal.isAutoSliding(); 526 ``` 527 528 ### Slide Changed Event 529 530 A 'slidechanged' event is fired each time the slide is changed (regardless of state). The event object holds the index values of the current slide as well as a reference to the previous and current slide HTML nodes. 531 532 Some libraries, like MathJax (see [#226](https://github.com/hakimel/reveal.js/issues/226#issuecomment-10261609)), get confused by the transforms and display states of slides. Often times, this can be fixed by calling their update or render function from this callback. 533 534 ```javascript 535 Reveal.addEventListener( 'slidechanged', function( event ) { 536 // event.previousSlide, event.currentSlide, event.indexh, event.indexv 537 } ); 538 ``` 539 540 ### Presentation State 541 542 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. 543 544 ```javascript 545 Reveal.slide( 1 ); 546 // we're on slide 1 547 548 var state = Reveal.getState(); 549 550 Reveal.slide( 3 ); 551 // we're on slide 3 552 553 Reveal.setState( state ); 554 // we're back on slide 1 555 ``` 556 557 ### Slide States 558 559 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. 560 561 Furthermore you can also listen to these changes in state via JavaScript: 562 563 ```javascript 564 Reveal.addEventListener( 'somestate', function() { 565 // TODO: Sprinkle magic 566 }, false ); 567 ``` 568 569 ### Slide Backgrounds 570 571 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. 572 573 #### Color Backgrounds 574 All CSS color formats are supported, like rgba() or hsl(). 575 ```html 576 <section data-background-color="#ff0000"> 577 <h2>Color</h2> 578 </section> 579 ``` 580 581 #### Image Backgrounds 582 By default, background images are resized to cover the full page. Available options: 583 584 | Attribute | Default | Description | 585 | :--------------------------- | :--------- | :---------- | 586 | data-background-image | | URL of the image to show. GIFs restart when the slide opens. | 587 | data-background-size | cover | See [background-size](https://developer.mozilla.org/docs/Web/CSS/background-size) on MDN. | 588 | data-background-position | center | See [background-position](https://developer.mozilla.org/docs/Web/CSS/background-position) on MDN. | 589 | data-background-repeat | no-repeat | See [background-repeat](https://developer.mozilla.org/docs/Web/CSS/background-repeat) on MDN. | 590 ```html 591 <section data-background-image="http://example.com/image.png"> 592 <h2>Image</h2> 593 </section> 594 <section data-background-image="http://example.com/image.png" data-background-size="100px" data-background-repeat="repeat"> 595 <h2>This background image will be sized to 100px and repeated</h2> 596 </section> 597 ``` 598 599 #### Video Backgrounds 600 Automatically plays a full size video behind the slide. 601 602 | Attribute | Default | Description | 603 | :--------------------------- | :------ | :---------- | 604 | data-background-video | | A single video source, or a comma separated list of video sources. | 605 | data-background-video-loop | false | Flags if the video should play repeatedly. | 606 | data-background-video-muted | false | Flags if the audio should be muted. | 607 | data-background-size | cover | Use `cover` for full screen and some cropping or `contain` for letterboxing. | 608 609 ```html 610 <section data-background-video="https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.mp4,https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.webm" data-background-video-loop data-background-video-muted> 611 <h2>Video</h2> 612 </section> 613 ``` 614 615 #### Iframe Backgrounds 616 Embeds a web page as a slide background that covers 100% of the reveal.js width and height. The iframe is in the background layer, behind your slides, and as such it's not possible to interact with it by default. To make your background interactive, you can add the `data-background-interactive` attribute. 617 ```html 618 <section data-background-iframe="https://slides.com" data-background-interactive> 619 <h2>Iframe</h2> 620 </section> 621 ``` 622 623 #### Background Transitions 624 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. 625 626 627 ### Parallax Background 628 629 If you want to use a parallax scrolling background, set the first two config properties below when initializing reveal.js (the other two are optional). 630 631 ```javascript 632 Reveal.initialize({ 633 634 // Parallax background image 635 parallaxBackgroundImage: '', // e.g. "https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg" 636 637 // Parallax background size 638 parallaxBackgroundSize: '', // CSS syntax, e.g. "2100px 900px" - currently only pixels are supported (don't use % or auto) 639 640 // Number of pixels to move the parallax background per slide 641 // - Calculated automatically unless specified 642 // - Set to 0 to disable movement along an axis 643 parallaxBackgroundHorizontal: 200, 644 parallaxBackgroundVertical: 50 645 646 }); 647 ``` 648 649 Make sure that the background size is much bigger than screen size to allow for some scrolling. [View example](http://revealjs.com/?parallaxBackgroundImage=https%3A%2F%2Fs3.amazonaws.com%2Fhakim-static%2Freveal-js%2Freveal-parallax-1.jpg¶llaxBackgroundSize=2100px%20900px). 650 651 652 653 ### Slide Transitions 654 The global presentation transition is set using the ```transition``` config value. You can override the global transition for a specific slide by using the ```data-transition``` attribute: 655 656 ```html 657 <section data-transition="zoom"> 658 <h2>This slide will override the presentation transition and zoom!</h2> 659 </section> 660 661 <section data-transition-speed="fast"> 662 <h2>Choose from three transition speeds: default, fast or slow!</h2> 663 </section> 664 ``` 665 666 You can also use different in and out transitions for the same slide: 667 668 ```html 669 <section data-transition="slide"> 670 The train goes on … 671 </section> 672 <section data-transition="slide"> 673 and on … 674 </section> 675 <section data-transition="slide-in fade-out"> 676 and stops. 677 </section> 678 <section data-transition="fade-in slide-out"> 679 (Passengers entering and leaving) 680 </section> 681 <section data-transition="slide"> 682 And it starts again. 683 </section> 684 ``` 685 686 687 ### Internal links 688 689 It's easy to link between slides. The first example below targets the index of another slide whereas the second targets a slide with an ID attribute (```<section id="some-slide">```): 690 691 ```html 692 <a href="#/2/2">Link</a> 693 <a href="#/some-slide">Link</a> 694 ``` 695 696 You can also add relative navigation links, similar to the built in reveal.js controls, by appending one of the following classes on any element. Note that each element is automatically given an ```enabled``` class when it's a valid navigation route based on the current slide. 697 698 ```html 699 <a href="#" class="navigate-left"> 700 <a href="#" class="navigate-right"> 701 <a href="#" class="navigate-up"> 702 <a href="#" class="navigate-down"> 703 <a href="#" class="navigate-prev"> <!-- Previous vertical or horizontal slide --> 704 <a href="#" class="navigate-next"> <!-- Next vertical or horizontal slide --> 705 ``` 706 707 708 ### Fragments 709 Fragments are used to highlight individual elements on a slide. Every element with the class ```fragment``` will be stepped through before moving on to the next slide. Here's an example: http://revealjs.com/#/fragments 710 711 The default fragment style is to start out invisible and fade in. This style can be changed by appending a different class to the fragment: 712 713 ```html 714 <section> 715 <p class="fragment grow">grow</p> 716 <p class="fragment shrink">shrink</p> 717 <p class="fragment fade-out">fade-out</p> 718 <p class="fragment fade-up">fade-up (also down, left and right!)</p> 719 <p class="fragment current-visible">visible only once</p> 720 <p class="fragment highlight-current-blue">blue only once</p> 721 <p class="fragment highlight-red">highlight-red</p> 722 <p class="fragment highlight-green">highlight-green</p> 723 <p class="fragment highlight-blue">highlight-blue</p> 724 </section> 725 ``` 726 727 Multiple fragments can be applied to the same element sequentially by wrapping it, this will fade in the text on the first step and fade it back out on the second. 728 729 ```html 730 <section> 731 <span class="fragment fade-in"> 732 <span class="fragment fade-out">I'll fade in, then out</span> 733 </span> 734 </section> 735 ``` 736 737 The display order of fragments can be controlled using the ```data-fragment-index``` attribute. 738 739 ```html 740 <section> 741 <p class="fragment" data-fragment-index="3">Appears last</p> 742 <p class="fragment" data-fragment-index="1">Appears first</p> 743 <p class="fragment" data-fragment-index="2">Appears second</p> 744 </section> 745 ``` 746 747 ### Fragment events 748 749 When a slide fragment is either shown or hidden reveal.js will dispatch an event. 750 751 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. 752 753 ```javascript 754 Reveal.addEventListener( 'fragmentshown', function( event ) { 755 // event.fragment = the fragment DOM element 756 } ); 757 Reveal.addEventListener( 'fragmenthidden', function( event ) { 758 // event.fragment = the fragment DOM element 759 } ); 760 ``` 761 762 ### Code syntax highlighting 763 764 By default, Reveal is configured with [highlight.js](https://highlightjs.org/) for code syntax highlighting. Below is an example with clojure code that will be syntax highlighted. When the `data-trim` attribute is present, surrounding whitespace is automatically removed. HTML will be escaped by default. To avoid this, for example if you are using `<mark>` to call out a line of code, add the `data-noescape` attribute to the `<code>` element. 765 766 ```html 767 <section> 768 <pre><code data-trim data-noescape> 769 (def lazy-fib 770 (concat 771 [0 1] 772 <mark>((fn rfib [a b]</mark> 773 (lazy-cons (+ a b) (rfib b (+ a b)))) 0 1))) 774 </code></pre> 775 </section> 776 ``` 777 778 ### Slide number 779 If you would like to display the page number of the current slide you can do so using the ```slideNumber``` and ```showSlideNumber``` configuration values. 780 781 ```javascript 782 // Shows the slide number using default formatting 783 Reveal.configure({ slideNumber: true }); 784 785 // Slide number formatting can be configured using these variables: 786 // "h.v": horizontal . vertical slide number (default) 787 // "h/v": horizontal / vertical slide number 788 // "c": flattened slide number 789 // "c/t": flattened slide number / total slides 790 Reveal.configure({ slideNumber: 'c/t' }); 791 792 // Control which views the slide number displays on using the "showSlideNumber" value: 793 // "all": show on all views (default) 794 // "speaker": only show slide numbers on speaker notes view 795 // "print": only show slide numbers when printing to PDF 796 Reveal.configure({ showSlideNumber: 'speaker' }); 797 798 ``` 799 800 801 ### Overview mode 802 803 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, 804 as if you were at 1,000 feet above your presentation. The overview mode comes with a few API hooks: 805 806 ```javascript 807 Reveal.addEventListener( 'overviewshown', function( event ) { /* ... */ } ); 808 Reveal.addEventListener( 'overviewhidden', function( event ) { /* ... */ } ); 809 810 // Toggle the overview mode programmatically 811 Reveal.toggleOverview(); 812 ``` 813 814 815 ### Fullscreen mode 816 Just press »F« on your keyboard to show your presentation in fullscreen mode. Press the »ESC« key to exit fullscreen mode. 817 818 819 ### Embedded media 820 Add `data-autoplay` to your media element if you want it to automatically start playing when the slide is shown: 821 822 ```html 823 <video data-autoplay src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video> 824 ``` 825 826 If you want to enable or disable autoplay globally, for all embedded media, you can use the `autoPlayMedia` configuration option. If you set this to `true` ALL media will autoplay regardless of individual `data-autoplay` attributes. If you initialize with `autoPlayMedia: false` NO media will autoplay. 827 828 Note that embedded HTML5 `<video>`/`<audio>` and YouTube/Vimeo iframes are automatically paused when you navigate away from a slide. This can be disabled by decorating your element with a `data-ignore` attribute. 829 830 831 ### Embedded iframes 832 833 reveal.js automatically pushes two [post messages](https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage) to embedded iframes. ```slide:start``` when the slide containing the iframe is made visible and ```slide:stop``` when it is hidden. 834 835 836 ### Stretching elements 837 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: 838 839 ```html 840 <section> 841 <h2>This video will use up the remaining space on the slide</h2> 842 <video class="stretch" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video> 843 </section> 844 ``` 845 846 Limitations: 847 - Only direct descendants of a slide section can be stretched 848 - Only one descendant per slide section can be stretched 849 850 851 ### postMessage API 852 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: 853 854 ```javascript 855 <window>.postMessage( JSON.stringify({ method: 'slide', args: [ 2 ] }), '*' ); 856 ``` 857 858 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: 859 860 ```javascript 861 window.addEventListener( 'message', function( event ) { 862 var data = JSON.parse( event.data ); 863 if( data.namespace === 'reveal' && data.eventName ==='slidechanged' ) { 864 // Slide changed, see data.state for slide number 865 } 866 } ); 867 ``` 868 869 This cross-window messaging can be toggled on or off using configuration flags. 870 871 ```javascript 872 Reveal.initialize({ 873 ..., 874 875 // Exposes the reveal.js API through window.postMessage 876 postMessage: true, 877 878 // Dispatches all reveal.js events to the parent window through postMessage 879 postMessageEvents: false 880 }); 881 ``` 882 883 884 ## PDF Export 885 886 Presentations can be exported to PDF via a special print stylesheet. This feature requires that you use [Google Chrome](http://google.com/chrome) or [Chromium](https://www.chromium.org/Home) and to be serving the presentation from a webserver. 887 Here's an example of an exported presentation that's been uploaded to SlideShare: http://www.slideshare.net/hakimel/revealjs-300. 888 889 ### Page size 890 Export dimensions are inferred from the configured [presentation size](#presentation-size). Slides that are too tall to fit within a single page will expand onto multiple pages. You can limit how many pages a slide may expand onto using the `pdfMaxPagesPerSlide` config option, for example `Reveal.configure({ pdfMaxPagesPerSlide: 1 })` ensures that no slide ever grows to more than one printed page. 891 892 ### Print stylesheet 893 To enable the PDF print capability in your presentation, the special print stylesheet at [/css/print/pdf.css](https://github.com/hakimel/reveal.js/blob/master/css/print/pdf.css) must be loaded. The default index.html file handles this for you when `print-pdf` is included in the query string. If you're using a different HTML template, you can add this to your HEAD: 894 895 ```html 896 <script> 897 var link = document.createElement( 'link' ); 898 link.rel = 'stylesheet'; 899 link.type = 'text/css'; 900 link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css'; 901 document.getElementsByTagName( 'head' )[0].appendChild( link ); 902 </script> 903 ``` 904 905 ### Instructions 906 1. Open your presentation with `print-pdf` included in the query string i.e. http://localhost:8000/?print-pdf. You can test this with [revealjs.com?print-pdf](http://revealjs.com?print-pdf). 907 * If you want to include [speaker notes](#speaker-notes) in your export, you can append `showNotes=true` to the query string: http://localhost:8000/?print-pdf&showNotes=true 908 1. Open the in-browser print dialog (CTRL/CMD+P). 909 1. Change the **Destination** setting to **Save as PDF**. 910 1. Change the **Layout** to **Landscape**. 911 1. Change the **Margins** to **None**. 912 1. Enable the **Background graphics** option. 913 1. Click **Save**. 914 915  916 917 Alternatively you can use the [decktape](https://github.com/astefanutti/decktape) project. 918 919 ## Theming 920 921 The framework comes with a few different themes included: 922 923 - black: Black background, white text, blue links (default theme) 924 - white: White background, black text, blue links 925 - league: Gray background, white text, blue links (default theme for reveal.js < 3.0.0) 926 - beige: Beige background, dark text, brown links 927 - sky: Blue background, thin dark text, blue links 928 - night: Black background, thick white text, orange links 929 - serif: Cappuccino background, gray text, brown links 930 - simple: White background, black text, blue links 931 - solarized: Cream-colored background, dark green text, blue links 932 933 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: 934 935 ```html 936 <link rel="stylesheet" href="css/theme/black.css" id="theme"> 937 ``` 938 939 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). 940 941 942 ## Speaker Notes 943 944 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. 945 946 A speaker timer starts as soon as the speaker view is opened. You can reset it to 00:00:00 at any time by simply clicking/tapping on it. 947 948 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. 949 950 Alternatively you can add your notes in a `data-notes` attribute on the slide. Like `<section data-notes="Something important"></section>`. 951 952 When used locally, this feature requires that reveal.js [runs from a local web server](#full-setup). 953 954 ```html 955 <section> 956 <h2>Some Slide</h2> 957 958 <aside class="notes"> 959 Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard). 960 </aside> 961 </section> 962 ``` 963 964 If you're using the external Markdown plugin, you can add notes with the help of a special delimiter: 965 966 ```html 967 <section data-markdown="example.md" data-separator="^\n\n\n" data-separator-vertical="^\n\n" data-separator-notes="^Note:"></section> 968 969 # Title 970 ## Sub-title 971 972 Here is some content... 973 974 Note: 975 This will only display in the notes window. 976 ``` 977 978 #### Share and Print Speaker Notes 979 980 Notes are only visible to the speaker inside of the speaker view. If you wish to share your notes with others you can initialize reveal.js with the `showNotes` config value set to `true`. Notes will appear along the bottom of the presentations. 981 982 When `showNotes` is enabled notes are also included when you [export to PDF](https://github.com/hakimel/reveal.js#pdf-export). By default, notes are printed in a semi-transparent box on top of the slide. If you'd rather print them on a separate page after the slide, set `showNotes: "separate-page"`. 983 984 #### Speaker notes clock and timers 985 986 The speaker notes window will also show: 987 988 - Time elapsed since the beginning of the presentation. If you hover the mouse above this section, a timer reset button will appear. 989 - Current wall-clock time 990 - (Optionally) a pacing timer which indicates whether the current pace of the presentation is on track for the right timing (shown in green), and if not, whether the presenter should speed up (shown in red) or has the luxury of slowing down (blue). 991 992 The pacing timer can be enabled by configuring by the `defaultTiming` parameter in the `Reveal` configuration block, which specifies the number of seconds per slide. 120 can be a reasonable rule of thumb. Timings can also be given per slide `<section>` by setting the `data-timing` attribute. Both values are in numbers of seconds. 993 994 995 ## Server Side Speaker Notes 996 997 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: 998 999 ```javascript 1000 Reveal.initialize({ 1001 ... 1002 1003 dependencies: [ 1004 { src: 'socket.io/socket.io.js', async: true }, 1005 { src: 'plugin/notes-server/client.js', async: true } 1006 ] 1007 }); 1008 ``` 1009 1010 Then: 1011 1012 1. Install [Node.js](http://nodejs.org/) (4.0.0 or later) 1013 2. Run ```npm install``` 1014 3. Run ```node plugin/notes-server``` 1015 1016 1017 ## Multiplexing 1018 1019 The multiplex plugin allows your audience to view the slides of the presentation you are controlling on their own phone, tablet or laptop. As the master presentation navigates the slides, all client presentations will update in real time. See a demo at [https://reveal-js-multiplex-ccjbegmaii.now.sh/](https://reveal-js-multiplex-ccjbegmaii.now.sh/). 1020 1021 The multiplex plugin needs the following 3 things to operate: 1022 1023 1. Master presentation that has control 1024 2. Client presentations that follow the master 1025 3. Socket.io server to broadcast events from the master to the clients 1026 1027 More details: 1028 1029 #### Master presentation 1030 Served from a static file server accessible (preferably) only to the presenter. This need only be on your (the presenter's) computer. (It's safer to run the master presentation from your own computer, so if the venue's Internet goes down it doesn't stop the show.) An example would be to execute the following commands in the directory of your master presentation: 1031 1032 1. ```npm install node-static``` 1033 2. ```static``` 1034 1035 If you want to use the speaker notes plugin with your master presentation then make sure you have the speaker notes plugin configured correctly along with the configuration shown below, then execute ```node plugin/notes-server``` in the directory of your master presentation. The configuration below will cause it to connect to the socket.io server as a master, as well as launch your speaker-notes/static-file server. 1036 1037 You can then access your master presentation at ```http://localhost:1947``` 1038 1039 Example configuration: 1040 ```javascript 1041 Reveal.initialize({ 1042 // other options... 1043 1044 multiplex: { 1045 // Example values. To generate your own, see the socket.io server instructions. 1046 secret: '13652805320794272084', // Obtained from the socket.io server. Gives this (the master) control of the presentation 1047 id: '1ea875674b17ca76', // Obtained from socket.io server 1048 url: 'https://reveal-js-multiplex-ccjbegmaii.now.sh' // Location of socket.io server 1049 }, 1050 1051 // Don't forget to add the dependencies 1052 dependencies: [ 1053 { src: '//cdn.socket.io/socket.io-1.3.5.js', async: true }, 1054 { src: 'plugin/multiplex/master.js', async: true }, 1055 1056 // and if you want speaker notes 1057 { src: 'plugin/notes-server/client.js', async: true } 1058 1059 // other dependencies... 1060 ] 1061 }); 1062 ``` 1063 1064 #### Client presentation 1065 Served from a publicly accessible static file server. Examples include: GitHub Pages, Amazon S3, Dreamhost, Akamai, etc. The more reliable, the better. Your audience can then access the client presentation via ```http://example.com/path/to/presentation/client/index.html```, with the configuration below causing them to connect to the socket.io server as clients. 1066 1067 Example configuration: 1068 ```javascript 1069 Reveal.initialize({ 1070 // other options... 1071 1072 multiplex: { 1073 // Example values. To generate your own, see the socket.io server instructions. 1074 secret: null, // null so the clients do not have control of the master presentation 1075 id: '1ea875674b17ca76', // id, obtained from socket.io server 1076 url: 'https://reveal-js-multiplex-ccjbegmaii.now.sh' // Location of socket.io server 1077 }, 1078 1079 // Don't forget to add the dependencies 1080 dependencies: [ 1081 { src: '//cdn.socket.io/socket.io-1.3.5.js', async: true }, 1082 { src: 'plugin/multiplex/client.js', async: true } 1083 1084 // other dependencies... 1085 ] 1086 }); 1087 ``` 1088 1089 #### Socket.io server 1090 Server that receives the slideChanged events from the master presentation and broadcasts them out to the connected client presentations. This needs to be publicly accessible. You can run your own socket.io server with the commands: 1091 1092 1. ```npm install``` 1093 2. ```node plugin/multiplex``` 1094 1095 Or you can use the socket.io server at [https://reveal-js-multiplex-ccjbegmaii.now.sh/](https://reveal-js-multiplex-ccjbegmaii.now.sh/). 1096 1097 You'll need to generate a unique secret and token pair for your master and client presentations. To do so, visit ```http://example.com/token```, where ```http://example.com``` is the location of your socket.io server. Or if you're going to use the socket.io server at [https://reveal-js-multiplex-ccjbegmaii.now.sh/](https://reveal-js-multiplex-ccjbegmaii.now.sh/), visit [https://reveal-js-multiplex-ccjbegmaii.now.sh/token](https://reveal-js-multiplex-ccjbegmaii.now.sh/token). 1098 1099 You are very welcome to point your presentations at the Socket.io server running at [https://reveal-js-multiplex-ccjbegmaii.now.sh/](https://reveal-js-multiplex-ccjbegmaii.now.sh/), but availability and stability are not guaranteed. 1100 1101 For anything mission critical I recommend you run your own server. The easiest way to do this is by installing [now](https://zeit.co/now). With that installed, deploying your own Multiplex server is as easy running the following command from the reveal.js folder: `now plugin/multiplex`. 1102 1103 ##### socket.io server as file static server 1104 1105 The socket.io server can play the role of static file server for your client presentation, as in the example at [https://reveal-js-multiplex-ccjbegmaii.now.sh/](https://reveal-js-multiplex-ccjbegmaii.now.sh/). (Open [https://reveal-js-multiplex-ccjbegmaii.now.sh/](https://reveal-js-multiplex-ccjbegmaii.now.sh/) in two browsers. Navigate through the slides on one, and the other will update to match.) 1106 1107 Example configuration: 1108 ```javascript 1109 Reveal.initialize({ 1110 // other options... 1111 1112 multiplex: { 1113 // Example values. To generate your own, see the socket.io server instructions. 1114 secret: null, // null so the clients do not have control of the master presentation 1115 id: '1ea875674b17ca76', // id, obtained from socket.io server 1116 url: 'example.com:80' // Location of your socket.io server 1117 }, 1118 1119 // Don't forget to add the dependencies 1120 dependencies: [ 1121 { src: '//cdn.socket.io/socket.io-1.3.5.js', async: true }, 1122 { src: 'plugin/multiplex/client.js', async: true } 1123 1124 // other dependencies... 1125 ] 1126 ``` 1127 1128 It can also play the role of static file server for your master presentation and client presentations at the same time (as long as you don't want to use speaker notes). (Open [https://reveal-js-multiplex-ccjbegmaii.now.sh/](https://reveal-js-multiplex-ccjbegmaii.now.sh/) in two browsers. Navigate through the slides on one, and the other will update to match. Navigate through the slides on the second, and the first will update to match.) This is probably not desirable, because you don't want your audience to mess with your slides while you're presenting. ;) 1129 1130 Example configuration: 1131 ```javascript 1132 Reveal.initialize({ 1133 // other options... 1134 1135 multiplex: { 1136 // Example values. To generate your own, see the socket.io server instructions. 1137 secret: '13652805320794272084', // Obtained from the socket.io server. Gives this (the master) control of the presentation 1138 id: '1ea875674b17ca76', // Obtained from socket.io server 1139 url: 'example.com:80' // Location of your socket.io server 1140 }, 1141 1142 // Don't forget to add the dependencies 1143 dependencies: [ 1144 { src: '//cdn.socket.io/socket.io-1.3.5.js', async: true }, 1145 { src: 'plugin/multiplex/master.js', async: true }, 1146 { src: 'plugin/multiplex/client.js', async: true } 1147 1148 // other dependencies... 1149 ] 1150 }); 1151 ``` 1152 1153 ## MathJax 1154 1155 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). 1156 1157 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. 1158 1159 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. 1160 1161 ```js 1162 Reveal.initialize({ 1163 1164 // other options ... 1165 1166 math: { 1167 mathjax: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js', 1168 config: 'TeX-AMS_HTML-full' // See http://docs.mathjax.org/en/latest/config-files.html 1169 }, 1170 1171 dependencies: [ 1172 { src: 'plugin/math/math.js', async: true } 1173 ] 1174 1175 }); 1176 ``` 1177 1178 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. 1179 1180 1181 ## Installation 1182 1183 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. 1184 1185 ### Basic setup 1186 1187 The core of reveal.js is very easy to install. You'll simply need to download a copy of this repository and open the index.html file directly in your browser. 1188 1189 1. Download the latest version of reveal.js from <https://github.com/hakimel/reveal.js/releases> 1190 1191 2. Unzip and replace the example contents in index.html with your own 1192 1193 3. Open index.html in a browser to view it 1194 1195 1196 ### Full setup 1197 1198 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. 1199 1200 1. Install [Node.js](http://nodejs.org/) (4.0.0 or later) 1201 1202 1. Clone the reveal.js repository 1203 ```sh 1204 $ git clone https://github.com/hakimel/reveal.js.git 1205 ``` 1206 1207 1. Navigate to the reveal.js folder 1208 ```sh 1209 $ cd reveal.js 1210 ``` 1211 1212 1. Install dependencies 1213 ```sh 1214 $ npm install 1215 ``` 1216 1217 1. Serve the presentation and monitor source files for changes 1218 ```sh 1219 $ npm start 1220 ``` 1221 1222 1. Open <http://localhost:8000> to view your presentation 1223 1224 You can change the port by using `npm start -- --port=8001`. 1225 1226 1227 ### Folder Structure 1228 - **css/** Core styles without which the project does not function 1229 - **js/** Like above but for JavaScript 1230 - **plugin/** Components that have been developed as extensions to reveal.js 1231 - **lib/** All other third party assets (JavaScript, CSS, fonts) 1232 1233 1234 ## License 1235 1236 MIT licensed 1237 1238 Copyright (C) 2017 Hakim El Hattab, http://hakim.se