A framework for easily creating beautiful presentations using HTML. [Check out the live demo](http://lab.hakim.se/reveal-js/).
-reveal.js comes with a broad range of features including [nested slides](https://github.com/hakimel/reveal.js#markup), [Markdown contents](https://github.com/hakimel/reveal.js#markdown), [PDF export](https://github.com/hakimel/reveal.js#pdf-export), [speaker notes](https://github.com/hakimel/reveal.js#speaker-notes) and a [JavaScript API](https://github.com/hakimel/reveal.js#api). It's best viewed in a modern browser but [fallbacks](https://github.com/hakimel/reveal.js/wiki/Browser-Support) are available to make sure your presentation can still be viewed elsewhere.
+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).
+## Table of contents
+- [Online Editor](#online-editor)
+- [Instructions](#instructions)
+ - [Markup](#markup)
+ - [Markdown](#markdown)
+ - [Element Attributes](#element-attributes)
+ - [Slide Attributes](#slide-attributes)
+- [Configuration](#configuration)
+- [Presentation Size](#presentation-size)
+- [Dependencies](#dependencies)
+- [Ready Event](#ready-event)
+- [Auto-sliding](#auto-sliding)
+- [Keyboard Bindings](#keyboard-bindings)
+- [Touch Navigation](#touch-navigation)
+- [Lazy Loading](#lazy-loading)
+- [API](#api)
+ - [Slide Changed Event](#slide-changed-event)
+ - [Presentation State](#presentation-state)
+ - [Slide States](#slide-states)
+ - [Slide Backgrounds](#slide-backgrounds)
+ - [Parallax Background](#parallax-background)
+ - [Slide Transitions](#slide-transitions)
+ - [Internal links](#internal-links)
+ - [Fragments](#fragments)
+ - [Fragment events](#fragment-events)
+ - [Code syntax highlighting](#code-syntax-highlighting)
+ - [Slide number](#slide-number)
+ - [Overview mode](#overview-mode)
+ - [Fullscreen mode](#fullscreen-mode)
+ - [Embedded media](#embedded-media)
+ - [Stretching elements](#stretching-elements)
+ - [postMessage API](#postmessage-api)
+- [PDF Export](#pdf-export)
+- [Theming](#theming)
+- [Speaker Notes](#speaker-notes)
+ - [Share and Print Speaker Notes](#share-and-print-speaker-notes)
+ - [Server Side Speaker Notes](#server-side-speaker-notes)
+- [Multiplexing](#multiplexing)
+ - [Master presentation](#master-presentation)
+ - [Client presentation](#client-presentation)
+ - [Socket.io server](#socketio-server)
+- [MathJax](#mathjax)
+- [Installation](#installation)
+ - [Basic setup](#basic-setup)
+ - [Full setup](#full-setup)
+ - [Folder Structure](#folder-structure)
+- [License](#license)
-#### More reading:
-- [Installation](#installation): Step-by-step instructions for getting reveal.js running on your computer.
+#### More reading
- [Changelog](https://github.com/hakimel/reveal.js/releases): Up-to-date version history.
- [Examples](https://github.com/hakimel/reveal.js/wiki/Example-Presentations): Presentations created with reveal.js, add your own!
- [Browser Support](https://github.com/hakimel/reveal.js/wiki/Browser-Support): Explanation of browser support and fallbacks.
@@ -14,14 +60,36 @@ reveal.js comes with a broad range of features including [nested slides](https:/
## Online Editor
-Presentations are written using HTML or Markdown but there's also an online editor for those of you who prefer a graphical interface. Give it a try at [http://slides.com](http://slides.com).
+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).
## Instructions
### Markup
-Markup hierarchy needs to be ``grow
shrink
fade-out
+fade-up (also down, left and right!)
visible only once
blue only once
highlight-red
@@ -626,22 +781,22 @@ Reveal.addEventListener( 'fragmenthidden', function( event ) { ### Code syntax highlighting -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. +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 `` to call out a line of code, add the `data-noescape` attribute to the `` element.
```html
-
+
(def lazy-fib
(concat
[0 1]
- ((fn rfib [a b]
+ ((fn rfib [a b]
(lazy-cons (+ a b) (rfib b (+ a b)))) 0 1)))
```
### Slide number
-If you would like to display the page number of the current slide you can do so using the ```slideNumber``` configuration value.
+If you would like to display the page number of the current slide you can do so using the ```slideNumber``` and ```showSlideNumber``` configuration values.
```javascript
// Shows the slide number using default formatting
@@ -654,6 +809,12 @@ Reveal.configure({ slideNumber: true });
// "c/t": flattened slide number / total slides
Reveal.configure({ slideNumber: 'c/t' });
+// Control which views the slide number displays on using the "showSlideNumber" value:
+// "all": show on all views (default)
+// "speaker": only show slide numbers on speaker notes view
+// "print": only show slide numbers when printing to PDF
+Reveal.configure({ showSlideNumber: 'speaker' });
+
```
@@ -670,20 +831,26 @@ Reveal.addEventListener( 'overviewhidden', function( event ) { /* ... */ } );
Reveal.toggleOverview();
```
+
### Fullscreen mode
Just press »F« on your keyboard to show your presentation in fullscreen mode. Press the »ESC« key to exit fullscreen mode.
### Embedded media
-Embedded HTML5 `+ Created by Hakim El Hattab / @hakimel +
++ reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do. +
+Slides can be nested inside of each other.
+Use the Space key to navigate through all slides.
+Nested slides are useful for adding additional detail underneath a high level horizontal slide.
+That's it, time to go back up.
++ Not a coder? Not a problem. There's a fully-featured visual editor for authoring these, try it out at http://slides.com. +
++ Press ESC to enter the slide overview. +
++ Hold down alt and click on any element to zoom in on it using zoom.js. Alt + click anywhere to zoom back out. +
++ Presentations look great on touch devices, like mobile phones and tablets. Simply swipe through your slides. +
+Hit the next arrow...
+... to step through ...
+... a fragmented slide.
+ + +There's different types of fragments, like:
+grow
+shrink
+fade-out
+fade-up (also down, left and right!)
+current-visible
+Highlight red blue green
+
+ You can select from different transitions, like:
+ None -
+ Fade -
+ Slide -
+ Convex -
+ Concave -
+ Zoom
+
+ reveal.js comes with a few themes built in:
+
+ Black (default) -
+ White -
+ League -
+ Sky -
+ Beige -
+ Simple
+ Serif -
+ Blood -
+ Night -
+ Moon -
+ Solarized
+
+ Set data-background="#dddddd" on a slide to change the background color. All CSS color formats are supported.
+
+ <section data-background="image.png"><section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"><section data-background-video="video.mp4,video.webm">+ Different background transitions are available via the backgroundTransition option. This one's called "zoom". +
+Reveal.configure({ backgroundTransition: 'zoom' })+ You can override background transitions per-slide. +
+<section data-background-transition="zoom">
+function linkify( selector ) {
+ if( supports3DTransforms ) {
+
+ var nodes = document.querySelectorAll( selector );
+
+ for( var i = 0, len = nodes.length; i < len; i++ ) {
+ var node = nodes[i];
+
+ if( !node.className ) {
+ node.className += ' roll';
+ }
+ }
+ }
+}
+ Code syntax highlighting courtesy of highlight.js.
+| Item | +Value | +Quantity | +
|---|---|---|
| Apples | +$1 | +7 | +
| Lemonade | +$2 | +18 | +
| Bread | +$3 | +2 | +
+ These guys come in two forms, inline:
+ “The nice thing about standards is that there are so many to choose from”
and block:
+
+ “For years there has been a theory that millions of monkeys typing at random on millions of typewriters would + reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.” ++
+ You can link between slides internally, + like this. +
+There's a speaker view. It includes a timer, preview of the upcoming slide as well as your speaker notes.
+Press the S key to try it out.
+ + +Presentations can be exported to PDF, here's an example:
+ +
+ Set data-state="something" on a slide and "something"
+ will be added as a class to the document element when the slide is open. This lets you
+ apply broader style changes, like switching the page background.
+
+ Additionally custom events can be triggered on a per slide basis by binding to the data-state name.
+
+Reveal.addEventListener( 'customevent', function() {
+ console.log( '"customevent" has fired' );
+} );
+ + Press B or . on your keyboard to pause the presentation. This is helpful when you're on stage and want to take distracting slides off the screen. +
+- Created by Hakim El Hattab / @hakimel -
-- reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do. -
-Slides can be nested inside of each other.
-Use the Space key to navigate through all slides.
-Nested slides are useful for adding additional detail underneath a high level horizontal slide.
-That's it, time to go back up.
-- Not a coder? Not a problem. There's a fully-featured visual editor for authoring these, try it out at http://slides.com. -
-- Press ESC to enter the slide overview. -
-- Hold down alt and click on any element to zoom in on it using zoom.js. Alt + click anywhere to zoom back out. -
-- Presentations look great on touch devices, like mobile phones and tablets. Simply swipe through your slides. -
-Hit the next arrow...
-... to step through ...
-... a fragmented slide.
- - -There's different types of fragments, like:
-grow
-shrink
-fade-out
-current-visible
-highlight-red
-highlight-blue
-
- You can select from different transitions, like:
- None -
- Fade -
- Slide -
- Convex -
- Concave -
- Zoom
-
- reveal.js comes with a few themes built in:
-
- Black (default) -
- White -
- League -
- Sky -
- Beige -
- Simple
- Serif -
- Blood -
- Night -
- Moon -
- Solarized
-
- Set data-background="#dddddd" on a slide to change the background color. All CSS color formats are supported.
-
<section data-background="image.png"><section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"><section data-background-video="video.mp4,video.webm">- Different background transitions are available via the backgroundTransition option. This one's called "zoom". -
-Reveal.configure({ backgroundTransition: 'zoom' })- You can override background transitions per-slide. -
-<section data-background-transition="zoom">
-function linkify( selector ) {
- if( supports3DTransforms ) {
-
- var nodes = document.querySelectorAll( selector );
-
- for( var i = 0, len = nodes.length; i < len; i++ ) {
- var node = nodes[i];
-
- if( !node.className ) {
- node.className += ' roll';
- }
- }
- }
-}
- Code syntax highlighting courtesy of highlight.js.
-| Item | -Value | -Quantity | -
|---|---|---|
| Apples | -$1 | -7 | -
| Lemonade | -$2 | -18 | -
| Bread | -$3 | -2 | -
- These guys come in two forms, inline:
- “The nice thing about standards is that there are so many to choose from”
and block:
-
- “For years there has been a theory that millions of monkeys typing at random on millions of typewriters would - reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.” --
- You can link between slides internally, - like this. -
-There's a speaker view. It includes a timer, preview of the upcoming slide as well as your speaker notes.
-Press the S key to try it out.
- - -Presentations can be exported to PDF, here's an example:
- -
- Set data-state="something" on a slide and "something"
- will be added as a class to the document element when the slide is open. This lets you
- apply broader style changes, like switching the page background.
-
- Additionally custom events can be triggered on a per slide basis by binding to the data-state name.
-
-Reveal.addEventListener( 'customevent', function() {
- console.log( '"customevent" has fired' );
-} );
- - Press B or . on your keyboard to pause the presentation. This is helpful when you're on stage and want to take distracting slides off the screen. -
-