Revealjs笔记

目录

RevealjsReadingNotes

Home

https://revealjs.com

Demo

TODO

Installation

  1. Basic Setup
  1. Full Setup(Recommended)
  • Install Node.js (10.0.0 or later)
  • Clone the reveal.js repository $ git clone https://github.com/hakimel/reveal.js.git
  • Move to the reveal.js folder and install dependencies $ cd reveal.js && npm install, maybe you should install npm or others, use $ sudo pacman -S npm
  • Serve the presentation and monitor source files for changes $ npm start
  • Open <[http://localhost:8000]> to view your presentation
  1. Configed

  • Development server port defaults to port 8000, you can use the port argument to switch to a different one: $ npm start -- --port=8001 or other

  • Installing from npm $ npm install reveal.js or $ yarn add reveal.js

  • Once installed, you can include reveal.js as an ES module:

    import Reveal from 'reveal.js';
import Markdown from 'reveal.js/plugin/markdown/markdown.esm.js';

let deck = new Reveal({
   plugins: [ Markdown ]
})
deck.initialize();

  • You'll also need to include the reveal.js styles an d a presentation theme.

	<link rel="stylesheet" href="/node_modules/reveal.js/dist/reveal.css">
	<link rel="stylesheet" href="/node_modules/reveal.js/dist/theme/black.css">

CONTENT

Markup

  1. Presentation: Here's a barebones example of a fully working reveal.js
  • <html>
  <head>
    <link rel="stylesheet" href="dist/reveal.css">
    <link rel="stylesheet" href="dist/theme/white.css">
  </head>
  <body>
    <div class="reveal">
      <div class="slides">
        <section>Slide 1</section>
        <section>Slide 2</section>
      </div>
    </div>
    <script src="dist/reveal.js"></script>
    <script>
      Reveal.initialize();
    </script>
  </body>
</html>

  • The presentation markup hierarchy needs to be .reveal > .slides > section where the section element represents one slide and can be repeated indefinitely.

  • If you place multiple section elements inside of another section the will be shown as vertical slides. The first of vertical slides is the "root" of hte others (at the top), and will be included in the horizontal sequence. For example:

  • <div class="reveal">
  <div class="slides">
    <section>Horizontal Slide</section>
    <section>
      <section>Vertical Slide 1</section>
      <section>Vertical Slide 2</section>
    </section>
  </div>
</div>

  • It's also possible to write presentations using Markdown.

  1. Viewport
  • The reveal.js viewport is the wrapper DOM element that determines the size of your presentation on a web page. By default, this will be the body element.
  • If you're including multiple presentations on the same page each presentations .reveal element will act as their viewport.
  • The viewport is always decorated with a reveal-viewport class reveal.js is initialized.
  1. Slide States

  • If you set data-state="make-it-pop" on a slide <section>, "make-it-pop" will be applied as a class on the viewport element when that slide is opened. This allows you to apply broad style changes to the page based on the active slide.

  • <section data-state="make-it-pop"></section>

  • /* CSS */
.make-it-pop {
  filter: drop-shadow(0 0 10px purple);
}

  • You can also listen to these changes in state via JavaScript:

  • Reveal.on( 'make-it-pop', () => {
  console.log('✨');
} );

Markdown

  1. Common

  • It's possible and often times more convenient to write presentation content using Markdown.

  • To create a Markdown slide, add the data-markdown attribute to your <section> element and wrap the contents in a <textarea data-template> like the example below.

  • <section data-markdown>
  <textarea data-template>
    ## Slide 1
    A paragraph with some text and a [link](http://hakim.se).
    ---
    ## Slide 2
    ---
    ## Slide 3
  </textarea>
</section>

  • Note that this is sensitive to indentation (avoid mixing tabs and spaces) and line breaks (avoid consecutive breaks).

  1. Plugin

  • This is functionality is powered by the built-in Markdown plugin which in turn uses marked for all parsing. $ npm install marked

  • The Markdown plugin is included in our default presentation examples. If you want to manually add it to a new presentation here's how:

  • <script src="plugin/markdown/markdown.js"></script>
<script>
  Reveal.initialize({
    plugins: [ RevealMarkdown ]
  });
</script>
  1. External Markdown

  • 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 ^\n---\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 notes?:, so it will match both "note:" and "notes:").

  • The data-charset attribute is optional and specifies which charset to use when loading the external file.

  • When used locally, this feature requires that reveal.js runs from a local web server. The following example customizes all available options:

  • <section data-markdown="example.md"
         data-separator="^\n\n\n"
         data-separator-vertical="^\n\n"
         data-separator-notes="^Note:"
         data-charset="iso-8859-15">
    <!--
        Note that Windows uses `\r\n` instead of `\n` as its linefeed character.
        For a regex that supports all operating systems, use `\r?\n` instead of `\n`.
    -->
</section>
  1. Element Attributes

  • Special syntax (through HTML comments) is available for adding attributes to Markdown elements. This is useful for fragments, among other things.

  • <section data-markdown>
  <script type="text/template">
    - Item 1 <!-- .element: class="fragment" data-fragment-index="2" -->
    - Item 2 <!-- .element: class="fragment" data-fragment-index="1" -->
  </script>
</section>
  1. Slide Attributes

  • Special syntax (through HTML comments) is available for adding attributes to the slide <section> elements generated by your Markdown.

  • <section data-markdown>
  <script type="text/template">
  <!-- .slide: data-background="#ff0000" -->
    Markdown content
  </script>
</section>
  1. Syntax Highlighting

  • Powerful syntax highlighting features are built into reveal.js.

  • Using the bracket syntax shown below, you can highlight individual lines and even walk through multiple separate highlights step-by-step. Learn more about line highlights.

  • <section data-markdown>
  <textarea data-template>
    ```js [1-2|3|4]
    let a = 1;
    let b = 2;
    let c = x => 1 + 2 + x;
    c(3);
  1. Configuring marked

  • We use marked to parse Markdown. To customize marked's rendering, you can pass in options when configuring Reveal:

  • Reveal.initialize({
  // Options which are passed into marked
  // See https://marked.js.org/#/USING_ADVANCED.md#options
  markdown: {
    smartypants: true
  }
});

Background

  1. Slide Backgrounds
  • 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.
  1. Color Backgrounds

  • All CSS color formats are supported, including hex values, keywords, rgba() or hsl().

  • <section data-background-color="aquamarine">
  <h2>🐟</h2>
</section>
<section data-background-color="rgb(70, 70, 255)">
  <h2>🐳</h2>
</section>
  1. Image Backgrounds

  • By default, background images are resized to cover the full page. Available options:

  • Attribute Default Description
    data-background-image URL of the image to show. GIFs restart when the slide opens.
    data-background-size cover See background-size on MDN.
    data-background-position center See background-position on MDN.
    data-background-repeat no-repeat See background-repeat on MDN.
    data-background-opacity 1 Opacity of the background image on a 0-1 scale. 0 is transparent and 1 is fully opaque. 
  • <section data-background-image="http://example.com/image.png">
  <h2>Image</h2>
</section>
<section data-background-image="http://example.com/image.png" 
          data-background-size="100px" data-background-repeat="repeat">
  <h2>This background image will be sized to 100px and repeated</h2>
</section>
  1. Video Backgrounds

  • Automatically plays a full size video behind the slide.

  • Attribute Default Description
    data-background-video A single video source, or a comma separated list of video sources.
    data-background-video-loop false Flags if the video should play repeatedly.
    data-background-video-muted false Flags if the audio should be muted.
    data-background-size cover Use cover for full screen and some cropping or contain for letterboxing.
    data-background-opacity 1 Opacity of the background video on a 0-1 scale. 0 is transparent and 1 is fully opaque. 
  • <section data-background-video="https://static.slid.es/site/homepage/v1/homepage-video-editor.mp4" 
          data-background-video-loop data-background-video-muted>
  <h2>Video</h2>
</section>
  1. Iframe Backgrounds

  • 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.

  • Attribute Default Description
    data-background-iframe URL of the iframe to load
    data-background-interactive false Include this attribute to make it possible to interact with the iframe contents. Enabling this will prevent interaction with the slide content. 
  • <section data-background-iframe="https://slides.com"
          data-background-interactive>
  <h2>Iframe</h2>
</section>

  • Iframes are lazy-loaded when they become visible.

  • If you'd like to preload iframes ahead of time, you can append a data-preload attribute to the slide <section>.

  • You can also enable preloading globally for all iframes using the preloadIframes configuration option.

  1. Background Transitions
  • We'll use a cross fade to transition between slide backgrounds by default. This can be changed using the backgroundTransition config option.
  1. Parallax Background

  • If you want to use a parallax scrolling background, set the first two properties below when initializing reveal.js (the other two are optional).

  • Reveal.initialize({
  // Parallax background image
  parallaxBackgroundImage: '', // e.g. "https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg"

  // Parallax background size
  parallaxBackgroundSize: '', // CSS syntax, e.g. "2100px 900px" - currently only pixels are supported (don't use % or auto)

  // Number of pixels to move the parallax background per slide
  // - Calculated automatically unless specified
  // - Set to 0 to disable movement along an axis
  parallaxBackgroundHorizontal: 200,
  parallaxBackgroundVertical: 50
});

  • Make sure that the background size is much bigger than screen size to allow for some scrolling. [View example](https://revealjs.com/demo?parallaxBackgroundImage=https%3A%2F%2Fs3.amazonaws.com%2Fhakim-static%2Freveal-js%2Freveal-parallax-1.jpg&parallaxBackgroundSize=2100px 900px).

Media

  1. Media
  • We provide convenient mechanics for autoplaying and lazy loading HTML media elements and iframes based on slide visibility and proximity.
  • This works for video, audio and iframe elements.
  1. Autoplay

  • Add data-autoplay to your media element if you want it to automatically start playing when the slide is shown:

  • <video data-autoplay src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>

  • If you want to enable or disable autoplay globally, for all embedded media, you can use the autoPlayMedia configuration option.

  • If you set this option to true ALL media will autoplay regardless of individual data-autoplay attributes. If you set it to autoPlayMedia: false NO media will autoplay.

  • Reveal.initialize({
	autoPlayMedia: true
})

  • Note that embedded HTML <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.

  1. Lazy Loading

  • When working on presentations 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.

  • 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.

  • <section>
  <img data-src="image.png">
  <iframe data-src="https://hakim.se"></iframe>
  <video>
    <source data-src="video.webm" type="video/webm" />
    <source data-src="video.mp4" type="video/mp4" />
  </video>
</section>
  1. Lazy Loading Iframes

  • Note that lazy loaded iframes ignore the viewDistance configuration and will only load when their containing slide becomes visible. Iframes are also unloaded as soon as the slide is hidden.

  • When we lazy load a video or audio element, reveal.js won't start playing that content until the slide becomes visible.

  • However there is no way to control this for an iframe since that could contain any kind of content. That means if we loaded an iframe before the slide is visible on screen it could begin playing media and sound in the background.

  • You can override this behavior with the data-preload attribute. The iframe below will be loaded according to the viewDistance.

  • <section>
  <iframe data-src="https://hakim.se" data-preload></iframe>
</section>

  • You can also change the default globally with the preloadIframes configuration option. If set to true ALL iframes with a data-src attribute will be preloaded when within the viewDistance regardless of individual data-preload attributes. If set to false, all iframes will only be loaded when they become visible.

  1. Iframes
  • Using iframes is a convenient way to include content from external sources, like a YouTube video or Google Sheet. reveal.js automatically detects YouTube and Vimeo embed URLs and autoplays them when the slide becomes visible.
  • If you add an <iframe> inside your slide it's constrained by the size of the slide. To break out of this constraint and add a full page iframe, you can use an iframe slide background.
  1. Iframe Post Message

  • reveal.js automatically pushes two post messages to embedded iframes.

  • slide:start when the slide containing the iframe is made visible and slide:stop when it is hidden.

  • // JavaScript inside of an iframe embedded within reveal.js
window.addEventListener( 'message', event => {
	if( event.data === 'slide:start' ) {
		// The slide containing this iframe is visible
	}
	else if( event.data === 'slide:stop' ) {
		// The slide containing this iframe is not visible
	}
} );

Code

  1. Presenting Code

  • reveal.js includes a powerful set of features aimed at presenting syntax highlighted code — powered by highlight.js.

  • This functionality lives in the highlight plugin and is included in our default presentation boilerplate.

  • Below is an example with clojure code that will be syntax highlighted. When the data-trim attribute is present, surrounding whitespace within the <code> is automatically removed.

  • HTML will be escaped by default. To avoid this, add data-noescape to the <code> element.

  • <section>
  <pre><code data-trim data-noescape>
(def lazy-fib
  (concat
   [0 1]
   ((fn rfib [a b]
        (lazy-cons (+ a b) (rfib b (+ a b)))) 0 1)))
  </code></pre>
</section>
  1. Theming

  • Make sure that a syntax highlight theme is included in your document.

  • We include Monokai by default, which is distributed with the reveal.js repo at lib/css/monokai.css.

  • A full list of available themes can be found at https://highlightjs.org/static/demo/.

  • <link rel="stylesheet" href="lib/css/monokai.css">
<script src="plugin/highlight/highlight.js"></script>
<script>
  Reveal.initialize({
    plugins: [ RevealHighlight ]
  });
</script>
  1. Line Numbers & Highlights

  • You can enable line numbers by adding data-line-numbers to your <code> tags.

  • If you want to highlight specific lines you can provide a comma separated list of line numbers using the same attribute. For example, in the following example lines 3 and 8-10 are highlighted:

  • <pre><code data-line-numbers="3,8-10">
<table>
  <tr>
    <td>Apples</td>
    <td>$1</td>
    <td>7</td>
  </tr>
  <tr>
    <td>Oranges</td>
    <td>$2</td>
    <td>18</td>
  </tr>
</table>
</code></pre>
  1. Step-by-step Highlights

  • You can step through multiple code highlights on the same code block.

  • Delimit each of your highlight steps with the | character. For example data-line-numbers="1|2-3|4,6-10" will produce three steps. It will start by highlighting line 1, next step is lines 2-3, and finally line 4 and 6 through 10.

  • <pre>
<code data-line-numbers="3-5|8-10|13-15">
<table>
  <tr>
    <td>Apples</td>
    <td>$1</td>
    <td>7</td>
  </tr>
  <tr>
    <td>Oranges</td>
    <td>$2</td>
    <td>18</td>
  </tr>
  <tr>
    <td>Kiwi</td>
    <td>$3</td>
    <td>1</td>
  </tr>
</table>
</code>
</pre>
  1. HTML Entities

  • Content added inside of a <code> block is parsed as HTML by the web browser. If you have HTML characters (<>) in your code you will need to escape them ($lt; $gt;).

  • To avoid having to escape these characters manually, you can wrap your code in <script type="text/template"> and we'll handle it for you.

  • <pre><code><script type="text/template">
sealed class Either<out A, out B> {
  data class Left<out A>(val a: A) : Either<A, Nothing>()
  data class Right<out B>(val b: B) : Either<Nothing, B>()
}
</script></code></pre>

Math

  1. Math

  • If you want to display math equations in your presentation you can easily do so with the MathJax plugin. This is a very thin wrapper around the MathJax library. Find out more about plugins here.

  • 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 option at all.

  • <script src="plugin/math/math.js"></script>
<script>
  Reveal.initialize({
    math: {
      mathjax: 'https://cdn.jsdelivr.net/gh/mathjax/mathjax@2.7.8/MathJax.js',
      config: 'TeX-AMS_HTML-full',
      // pass other options into `MathJax.Hub.Config()`
      TeX: { Macros: { RR: "{\\bf R}" } }
    },
    plugins: [ RevealMath ]
  });
</script>

  • The plugin defaults to using 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.

  • <section>
  <h2>The Lorenz Equations</h2>
  \[\begin{aligned}
  \dot{x} &amp; = \sigma(y-x) \\
  \dot{y} &amp; = \rho x - y - xz \\
  \dot{z} &amp; = -\beta z + xy
  \end{aligned} \]
</section>
  1. Markdown

  • If you want to include math inside of a presentation written in Markdown you need to wrap the formula in backticks. This prevents syntax conflicts between LaTeX and Markdown. For example:

  • `$$ J(\theta_0,\theta_1) = \sum_{i=0} $$`

Fragments

  1. Fragments

  • Fragments are used to highlight or incrementally reveal individual elements on a slide. Every element with the class fragment will be stepped through before moving on to the next slide.

  • 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.

  • <p class="fragment">Fade in</p>
<p class="fragment fade-out">Fade out</p>
<p class="fragment highlight-red">Highlight red</p>
<p class="fragment fade-in-then-out">Fade in, then out</p>
<p class="fragment fade-up">Slide up while fading in</p>
  • Name Effect
    fade-out Start visible, fade out
    fade-up Slide up while fading in
    fade-down Slide down while fading in
    fade-left Slide left while fading in
    fade-right Slide right while fading in
    fade-in-then-out Fades in, then out on the next step
    fade-in-then-semi-out Fades in, then to 50% on the next step
    grow Scale up
    shrink Scale down
    strike Strike through
    highlight-red Turn text red
    highlight-green Turn text green
    highlight-blue Turn text blue
    highlight-current-red Turn text red, then back to original on next step
    highlight-current-green Turn text green, then back to original on next step
    highlight-current-blue Turn text blue, then back to original on next step
  1. Nested Fragments

  • Multiple fragments can be applied to the same element sequentially by wrapping it, this will fade in the text on the first step, turn it red on the second and fade out on the third.

  • <span class="fragment fade-in">
  <span class="fragment highlight-red">
    <span class="fragment fade-out">
      Fade in > Turn red > Fade out
    </span>
  </span>
</span>
  1. Fragment Order

  • By default fragments will be stepped through in the order that they appear in the DOM.

  • This display order can be changed using the data-fragment-index attribute. Note that multiple elements can appear at the same index.

  • <p class="fragment" data-fragment-index="3">Appears last</p>
<p class="fragment" data-fragment-index="1">Appears first</p>
<p class="fragment" data-fragment-index="2">Appears second</p>
  1. Events

  • When a fragment is either shown or hidden reveal.js will dispatch an event.

  • Reveal.on( 'fragmentshown', event => {
  // event.fragment = the fragment DOM element
} );
Reveal.on( 'fragmenthidden', event => {
  // event.fragment = the fragment DOM element
} );
  1. Internal links

  • You can create links from one slide to another. Start by giving your target slide a unique id attribute.

  • Next, you can create an anchor with an href in the format #/<id>. Here's a complete working example:

  • <section>
	<a href="#/grand-finale">Go to the last slide</a>
</section>
<section>
	<h2>Slide 2</h2>
</section>
<section id="grand-finale">
	<h2>The end</h2>
	<a href="#/0">Back to the first</a>
</section>
  1. Numbered Links

  • It's also possible to link to slides based on their slide index.

  • The href format for an numbered link is #/0 where 0 is the horizontal slide number.

  • To link to a vertical slide use #/0/0 where the second number is the index of the vertical slide target.

  • <a href="#/2">Go to 2nd slide</a>
<a href="#/3/2">Go to the 2nd vertical slide inside of the 3rd slide</a>
  1. Navigation Links

  • You can add relative navigation links that work similarly to the built in directional control arrows.

  • This is done by adding one of the following classes to any clickable HTML element inside of the .reveal container.

  • <button class="navigate-left">Left</button>
<button class="navigate-right">Right</button>
<button class="navigate-up">Up</button>
<button class="navigate-down">Down</button>

<!-- Previous vertical OR horizontal slide -->
<button class="navigate-prev">Prev</button>

 <!-- Next vertical OR horizontal slide -->
<button class="navigate-next">Next</button>

  • Each navigation element is automatically given an enabled class when it's a valid navigation route based on the current slide. For example, if you're on the first slide only navigate-right will have the enabled class since it's not possible to navigate towards the left.

Layout

  1. Layout
  • We provide a few different helper classes for controlling the layout and styling your content. We're aiming to add more of these in upcoming versions so keep an eye out for that.
  • If you're looking to change the sizing, scaling and centering of your presentation please see Presentation Size.
  1. Stack

  • The r-stack layout helper lets you center and place multiple elements on top of each other. This is intended to be used together with fragments to incrementally reveal elements.

  • <div class="r-stack">
  <img class="fragment" src="https://placekitten.com/450/300" width="450" height="300">
  <img class="fragment" src="https://placekitten.com/300/450" width="300" height="450">
  <img class="fragment" src="https://placekitten.com/400/400" width="400" height="400">
</div>

  • If you want to show each of the stacked elements individually you can adjust the fragment settings:

  • <div class="r-stack">
  <img class="fragment fade-out" data-fragment-index="0" src="https://placekitten.com/450/300" width="450" height="300">
  <img class="fragment current-visible" data-fragment-index="0" src="https://placekitten.com/300/450" width="300" height="450">
  <img class="fragment" src="https://placekitten.com/400/400" width="400" height="400">
</div>
  1. Fit Text

  • The r-fit-text class makes text as large as possible without overflowing the slide.

  • This is great when you want BIG text without having to manually find the right font size. Powered by fitty ❤️

  • <h2 class="r-fit-text">BIG</h2>

  • <h2 class="r-fit-text">FIT TEXT</h2>
<h2 class="r-fit-text">CAN BE USED FOR MULTIPLE HEADLINES</h2>
  1. Stretch

  • The r-stretch layout helper lets you resize an element, like an image or video, to cover the remaining vertical space in a slide.

  • For example, in the below example our slide contains a title, an image and a byline. Because the image has the .r-stretch class, it's height is set to the slide height minus the combined height of the title and byline.

  • <h2>Stretch Example</h2>
<img class="r-stretch" src="/images/slides-symbol-512x512.png">
<p>Image byline</p>

  • Stretch Limitations

  • Only direct descendants of a slide section can be stretched
  • Only one descendant per slide section can be stretched
  1. Frame

  • Decorate any element with r-frame to make it stand out against the background.

  • If the framed element is placed inside an anchor, we'll apply a hover effect to the border.

  • <img src="logo.svg" width="200">
<a href="#">
  <img class="r-frame" src="logo.svg" width="200">
</a>

Slide Visibility

  1. Slide Visibility
  • The data-visibility attribute can be used to hide slides.
  • It can also be used to mark slides as "uncounted" in reveal.js' internal numbering system, which affects the visible slide number and progress bar.
  1. Hidden Slides

  • To hide a slide from view, add data-visibility="hidden".

  • Hidden slides are removed from the DOM as soon as reveal.js is initialized.

  • <section>Slide 1</section>
<section data-visibility="hidden">Slide 2</section>
<section>Slide 3</section>
  1. Uncounted Slide

  • When preparing a presentation it can sometimes be helpful to prepare optional slides that you may or may not have time to show.

  • This is easily done by appending a few slides at the end of the presentation, however this means that the reveal.js progress bar and slide numbering will hint that there are additional slides.

  • To "hide" those slides from reveal.js' numbering system you can use data-visibility="uncounted".

  • <section>Slide 1</section>
<section>Slide 2</section>
<section data-visibility="uncounted">Slide 3</section>

Customization

Themes

  1. Themes

  • The framework comes with a few different themes included.

  • Name Effect
    black Black background, white text, blue links (default)
    white White background, black text, blue links
    league Gray background, white text, blue links
    beige Beige background, dark text, brown links
    sky Blue background, thin dark text, blue links
    night Black background, thick white text, orange links
    serif Cappuccino background, gray text, brown links
    simple White background, black text, blue links
    solarized Cream-colored background, dark green text, blue links
    blood Dark background, thick white text, red links
    moon Dark blue background, thick grey text, blue links

  • 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:

  • <link rel="stylesheet" href="dist/theme/black.css">
  1. Custom Properties
  1. Creating a Theme
  • If you want to add a theme of your own see the instructions here: /css/theme/README.md.
  • Alternatively, if you want a clean start, you can opt to start from a blank CSS document and customize everything from the ground up.

Transitions

  1. Transitions

  • When navigating a presentation, we transition between slides by animating them from right to left by default.

  • This transition can be changed by setting the transition config option to a valid transition style.

  • Transitions can also be overridden for a specific slide using the data-transition attribute.

  • <section data-transition="zoom">
  <h2>This slide will override the presentation transition and zoom!</h2>
</section>

<section data-transition-speed="fast">
  <h2>Choose from three transition speeds: default, fast or slow!</h2>
</section>
  1. Styles

  • This is a complete list of all available transition styles. They work for both slides and slide backgrounds.

  • Name Effect
    none Switch backgrounds instantly
    fade Cross fade — default for background transitions
    slide Slide between backgrounds — default for slide transitions
    convex Slide at a convex angle
    concave Slide at a concave angle
    zoom Scale the incoming slide up so it grows in from the center of the screen
  1. Separate In-Out Transitions

  • You can also use different in and out transitions for the same slide by appending -in or -out to the transition name.

  • <section data-transition="slide">
    The train goes on …
</section>
<section data-transition="slide">
    and on …
</section>
<section data-transition="slide-in fade-out">
    and stops.
</section>
<section data-transition="fade-in slide-out">
    (Passengers entering and leaving)
</section>
<section data-transition="slide">
    And it starts again.
</section>
  1. Background Transitions

  • We transition between slide backgrounds using a cross fade by default.

  • This can be changed on a global level or overridden for specific slides.

  • To change background transitions for all slides, use the backgroundTransition config option.

  • Reveal.initialize({
  backgroundTransition: 'slide'
});

  • Alternatively you can use the data-background-transition attribute on any <section> to override that specific transition.

Config Options

  1. Configuration Options

  • Presentation behavior can be fine-tuned using a wide array of configuration options.

  • These objects can be included where you initialize reveal.js. It's also possible to change config values at runtime.

  • Note that all configuration values are optional and will default to the values specified below.

  • Reveal.initialize({

  // Display presentation control arrows
  controls: true,

  // Help the user learn the controls by providing hints, for example by
  // bouncing the down arrow when they first encounter a vertical slide
  controlsTutorial: true,

  // Determines where controls appear, "edges" or "bottom-right"
  controlsLayout: 'bottom-right',

  // Visibility rule for backwards navigation arrows; "faded", "hidden"
  // or "visible"
  controlsBackArrows: 'faded',

  // Display a presentation progress bar
  progress: true,

  // Display the page number of the current slide
  // - true:    Show slide number
  // - false:   Hide slide number
  //
  // Can optionally be set as a string that specifies the number formatting:
  // - "h.v":   Horizontal . vertical slide number (default)
  // - "h/v":   Horizontal / vertical slide number
  // - "c":   Flattened slide number
  // - "c/t":   Flattened slide number / total slides
  //
  // Alternatively, you can provide a function that returns the slide
  // number for the current slide. The function should take in a slide
  // object and return an array with one string [slideNumber] or
  // three strings [n1,delimiter,n2]. See #formatSlideNumber().
  slideNumber: false,

  // Can be used to limit the contexts in which the slide number appears
  // - "all":      Always show the slide number
  // - "print":    Only when printing to PDF
  // - "speaker":  Only in the speaker view
  showSlideNumber: 'all',

  // Use 1 based indexing for # links to match slide number (default is zero
  // based)
  hashOneBasedIndex: false,

  // Add the current slide number to the URL hash so that reloading the
  // page/copying the URL will return you to the same slide
  hash: false,

  // Flags if we should monitor the hash and change slides accordingly
  respondToHashChanges: true,

  // Push each slide change to the browser history.  Implies `hash: true`
  history: false,

  // Enable keyboard shortcuts for navigation
  keyboard: true,

  // Optional function that blocks keyboard events when retuning false
  //
  // If you set this to 'foucsed', we will only capture keyboard events
  // for embdedded decks when they are in focus
  keyboardCondition: null,

  // Disables the default reveal.js slide layout (scaling and centering)
  // so that you can use custom CSS layout
  disableLayout: false,

  // Enable the slide overview mode
  overview: true,

  // Vertical centering of slides
  center: true,

  // Enables touch navigation on devices with touch input
  touch: true,

  // Loop the presentation
  loop: false,

  // Change the presentation direction to be RTL
  rtl: false,

  // Changes the behavior of our navigation directions.
  //
  // "default"
  // Left/right arrow keys step between horizontal slides, up/down
  // arrow keys step between vertical slides. Space key steps through
  // all slides (both horizontal and vertical).
  //
  // "linear"
  // Removes the up/down arrows. Left/right arrows step through all
  // slides (both horizontal and vertical).
  //
  // "grid"
  // When this is enabled, stepping left/right from a vertical stack
  // to an adjacent vertical stack will land you at the same vertical
  // index.
  //
  // Consider a deck with six slides ordered in two vertical stacks:
  // 1.1    2.1
  // 1.2    2.2
  // 1.3    2.3
  //
  // If you're on slide 1.3 and navigate right, you will normally move
  // from 1.3 -> 2.1. If "grid" is used, the same navigation takes you
  // from 1.3 -> 2.3.
  navigationMode: 'default',

  // Randomizes the order of slides each time the presentation loads
  shuffle: false,

  // Turns fragments on and off globally
  fragments: true,

  // Flags whether to include the current fragment in the URL,
  // so that reloading brings you to the same fragment position
  fragmentInURL: true,

  // Flags if the presentation is running in an embedded mode,
  // i.e. contained within a limited portion of the screen
  embedded: false,

  // Flags if we should show a help overlay when the question-mark
  // key is pressed
  help: true,

  // Flags if it should be possible to pause the presentation (blackout)
  pause: true,

  // Flags if speaker notes should be visible to all viewers
  showNotes: false,

  // Global override for autolaying embedded media (video/audio/iframe)
  // - null:   Media will only autoplay if data-autoplay is present
  // - true:   All media will autoplay, regardless of individual setting
  // - false:  No media will autoplay, regardless of individual setting
  autoPlayMedia: null,

  // Global override for preloading lazy-loaded iframes
  // - null:   Iframes with data-src AND data-preload will be loaded when within
  //           the viewDistance, iframes with only data-src will be loaded when visible
  // - true:   All iframes with data-src will be loaded when within the viewDistance
  // - false:  All iframes with data-src will be loaded only when visible
  preloadIframes: null,

  // Can be used to globally disable auto-animation
  autoAnimate: true,

  // Optionally provide a custom element matcher that will be
  // used to dictate which elements we can animate between.
  autoAnimateMatcher: null,

  // Default settings for our auto-animate transitions, can be
  // overridden per-slide or per-element via data arguments
  autoAnimateEasing: 'ease',
  autoAnimateDuration: 1.0,
  autoAnimateUnmatched: true,

  // CSS properties that can be auto-animated. Position & scale
  // is matched separately so there's no need to include styles
  // like top/right/bottom/left, width/height or margin.
  autoAnimateStyles: [
    'opacity',
    'color',
    'background-color',
    'padding',
    'font-size',
    'line-height',
    'letter-spacing',
    'border-width',
    'border-color',
    'border-radius',
    'outline',
    'outline-offset'
  ],

  // Controls automatic progression to the next slide
  // - 0:      Auto-sliding only happens if the data-autoslide HTML attribute
  //           is present on the current slide or fragment
  // - 1+:     All slides will progress automatically at the given interval
  // - false:  No auto-sliding, even if data-autoslide is present
  autoSlide: 0,

  // Stop auto-sliding after user input
  autoSlideStoppable: true,

  // Use this method for navigation when auto-sliding (defaults to navigateNext)
  autoSlideMethod: null,

  // Specify the average time in seconds that you think you will spend
  // presenting each slide. This is used to show a pacing timer in the
  // speaker view
  defaultTiming: null,

  // Enable slide navigation via mouse wheel
  mouseWheel: false,

  // Opens links in an iframe preview overlay
  // Add `data-preview-link` and `data-preview-link="false"` to customise each link
  // individually
  previewLinks: false,

  // Exposes the reveal.js API through window.postMessage
  postMessage: true,

  // Dispatches all reveal.js events to the parent window through postMessage
  postMessageEvents: false,

  // Focuses body when page changes visibility to ensure keyboard shortcuts work
  focusBodyOnPageVisibilityChange: true,

  // Transition style
  transition: 'slide', // none/fade/slide/convex/concave/zoom

  // Transition speed
  transitionSpeed: 'default', // default/fast/slow

  // Transition style for full page slide backgrounds
  backgroundTransition: 'fade', // none/fade/slide/convex/concave/zoom

  // The maximum number of pages a single slide can expand onto when printing
  // to PDF, unlimited by default
  pdfMaxPagesPerSlide: Number.POSITIVE_INFINITY,

  // Prints each fragment on a separate slide
  pdfSeparateFragments: true,

  // Offset used to reduce the height of content within exported PDF pages.
  // This exists to account for environment differences based on how you
  // print to PDF. CLI printing options, like phantomjs and wkpdf, can end
  // on precisely the total height of the document whereas in-browser
  // printing has to end one pixel before.
  pdfPageHeightOffset: -1,

  // Number of slides away from the current that are visible
  viewDistance: 3,

  // Number of slides away from the current that are visible on mobile
  // devices. It is advisable to set this to a lower number than
  // viewDistance in order to save resources.
  mobileViewDistance: 2,

  // The display mode that will be used to show slides
  display: 'block',

  // Hide cursor if inactive
  hideInactiveCursor: true,

  // Time before the cursor is hidden (in ms)
  hideCursorTime: 5000

});
  1. Reconfiguring

  • The configuration can be updated after initialization using the configure method.

  • // Turn autoSlide off
Reveal.configure({ autoSlide: 0 });

// Start auto-sliding every 5s
Reveal.configure({ autoSlide: 5000 });

Presentation Size

  1. Presentation Size

  • All presentations have a "normal" size, that is, the resolution at which they are authored.

  • reveal.js will automatically scale presentations uniformly based on the normal size to ensure that everything fits on any given display or viewport without changing the aspect ratio or layout of your content.

  • See below for a list of config options related to sizing, including their default values:

  • Reveal.initialize({
  // The "normal" size of the presentation, aspect ratio will
  // be preserved when the presentation is scaled to fit different
  // resolutions. Can be specified using percentage units.
  width: 960,
  height: 700,

  // Factor of the display size that should remain empty around
  // the content
  margin: 0.04,

  // Bounds for smallest/largest possible scale to apply to content
  minScale: 0.2,
  maxScale: 2.0
});
  1. Center

  • Slides are vertically centered on the screen based on how much content they contain. To disable this and leave slides fixed at their configured height set center to false.

  • Reveal.initialize({ center: false })
  1. Embedded

  • By default, reveal.js will assume that it should cover the full browser viewport.

  • If you want to embed your presentation within a smaller portion of a web page, or show multiple presentations on the same page, you can use the embedded config option.

  • Reveal.initialize({ embedded: false })

  • An embedded presentation will base its size on the dimensions of its .reveal root. If the size of that element changes from a source other than the window resize event, you can call Reveal.layout() to manually trigger a layout update.

  • // Change the size of our presentation
document.querySelector( '.reveal' ).style.width = '50vw';

// Make reveal.js aware of the size change
Reveal.layout();
  1. BYOL(Bring Your Own Layout)

  • If you want disable the built-in scaling and centering and Bring Your Own Layout, set disableLayout: true. That will make your slides cover 100% of the available page width and height and leave the responsive styling up to you.

  • Reveal.initialize({
  disableLayout: false
});

FEATURES

Vertical Slides

  1. Vertical Slides
  • Your slides are stepped between using a horizontal sliding transition by default. These horizontal slides are considered the main, or top-level, slides in your deck.
  • It's also possible to nest multiple slides within a single top-level slide to create a vertical stack. This is a great way to logically group content in your presentation and makes it convenient to include optional slides.
  • When presenting, you use the left/right arrows to step through the top-level (horizontal) slides. When you arrive at a vertical stack you can optionally press the up/down arrows to view the vertical slides or skip past them by pressing the right arrow. Here's an example showing a bird's-eye view of what this looks like in action.
  1. Markup

  • Here's what the markup looks like for a simple vertical stack.

  • <section>Horizontal Slide</section>
<section>
  <section>Vertical Slide 1</section>
  <section>Vertical Slide 2</section>
</section>
  1. Navigation Mode

  • You can fine tune the reveal.js navigation behavior by using the navigationMode config option.Note that these options are only useful for presentations that use a mix of horizontal and vertical slides. The following navigation modes are available:

  • Value Description
    default Left/right arrow keys step between horizontal slides. Up/down arrow keys step between vertical slides. Space key steps through all slides (both horizontal and vertical).
    linear Removes the up/down arrows. Left/right arrows step through all slides (both horizontal and vertical).
    grid When this is enabled, stepping left/right from a vertical stack to an adjacent vertical stack will land you at the same vertical index: 1.1 2.1 1.2 2.2 1.3 2.3 If you're on slide 1.3 and navigate right, you will normally move from 1.3 -> 2.1. With navigationMode set to "grid" the same navigation takes you from 1.3 -> 2.3.

Auto-Animate

  1. Auto-Animate

  • reveal.js can automatically animate elements across slides.

  • All you need to do is add data-auto-animate to two adjacent slide <section> elements and Auto-Animate will animate all matching elements between the two.

  • Here's a simple example to give you a better idea of how it can be used.

  • <section data-auto-animate>
  <h1>Auto-Animate</h1>
</section>
<section data-auto-animate>
  <h1 style="margin-top: 100px; color: red;">Auto-Animate</h1>
</section>

  • This example uses the margin-top property to move the element but internally reveal.js will use a CSS transform to ensure smooth movement. This same approach to animation works with most animatable CSS properties meaning you can transition things like position, font-size, line-height, color, background-color, padding and margin.

  1. Movement Animations

  • Animations are not limited to changes in style.

  • Auto-Animate can also be used to automatically move elements into their new position as content is added, removed or rearranged on a slide.

  • All without a single line of inline CSS.

  • <section data-auto-animate>
  <h1>Implicit</h1>
</section>
<section data-auto-animate>
  <h1>Implicit</h1>
  <h1>Animation</h1>
</section>
  1. How Elements are Matched

  • When you navigate between two auto-animated slides we'll do our best to automatically find matching elements in the two slides.

  • For text, we consider it a match if both the text contents and node type are identical.

  • For images, videos and iframes we compare the src attribute.

  • We also take into account the order in which the element appears in the DOM.

  • In situations where automatic matching is not feasible you can give the objects that you want to animate between a matching data-id attribute. We prioritize matching data-id values above our automatic matching.

  • Here's an example where we've given both blocks a matching ID since automatic matching has no content to go on.

  • <section data-auto-animate>
  <div data-id="box" style="height: 50px; background: salmon;"></div>
</section>
<section data-auto-animate>
  <div data-id="box" style="height: 200px; background: blue;"></div>
</section>
  1. Animation Settings

  • You can override specific animation settings such as easing and duration either for the whole presentation, per-slide or individually for each animated element. The following configuration attributes can be used to change the settings for a specific slide or element:

  • Attribute Default Description
    data-auto-animate-easing ease A CSS easing function.
    data-auto-animate-unmatched true Determines whether elements with no matching auto-animate target should fade in. Set to false to make them appear instantly.
    data-auto-animate-duration 1.0 Animation duration in seconds.
    data-auto-animate-delay 0 Animation delay in seconds (can only be set for specific elements, not at the slide level).

  • If you'd like to change the defaults for the whole deck, use the following config options:

  • Reveal.initialize({
  autoAnimateEasing: 'ease-out',
  autoAnimateDuration: 0.8,
  autoAnimateUnmatched: false
})
  1. Events

  • The autoanimate event is dispatched each time you step between two auto-animated slides.

  • Reveal.on( 'autoanimate', event => {
  // event.fromSlide, event.toSlide
} );
  1. Animating Between Code Blocks

  • We support animations between code blocks.

  • Make sure that the code block has data-line-numbers enabled and that all blocks have a matching data-id value.

  • <section data-auto-animate>
  <pre data-id="code-animation"><code data-trim data-line-numbers>
    let planets = [
      { name: 'mars', diameter: 6779 },
    ]
  </code></pre>
</section>
<section data-auto-animate>
  <pre data-id="code-animation"><code data-trim data-line-numbers>
    let planets = [
      { name: 'mars', diameter: 6779 },
      { name: 'earth', diameter: 12742 },
      { name: 'jupiter', diameter: 139820 }
    ]
  </code></pre>
</section>
<section data-auto-animate>
  <pre data-id="code-animation"><code data-trim data-line-numbers>
    let circumferenceReducer = ( c, planet ) => {
      return c + planet.diameter * Math.PI;
    }

    let planets = [
      { name: 'mars', diameter: 6779 },
      { name: 'earth', diameter: 12742 },
      { name: 'jupiter', diameter: 139820 }
    ]

    let c = planets.reduce( circumferenceReducer, 0 )
  </code></pre>
</section>
  1. Animating Between Lists

  • We match list items individually to let you animate new items being added or removed.

  • <section data-auto-animate>
  <ul>
    <li>Mercury</li>
    <li>Jupiter</li>
    <li>Mars</li>
  </ul>
</section>
<section data-auto-animate>
  <ul>
    <li>Mercury</li>
    <li>Earth</li>
    <li>Jupiter</li>
    <li>Saturn</li>
    <li>Mars</li>
  </ul>
</section>
  1. State Attributes
  • We add state attributes to the different elements involved in an auto-animation. These attributes can be tied into if you want to, for example, fine-tune the animation behavior with custom CSS.
  • Right before an auto-animation starts we add data-auto-animate="pending" to the slide <section> coming into view. At this point the upcoming slide is visible and all of the animated elements have been moved to their starting positions. Next we switch to data-auto-animate="running" to indicate when the elements start animating towards their final properties.
  • Each individual element is decorated with a data-auto-animate-target attribute. The value of the attribute is a unique ID for this particular animation OR "unmatched" if this element should animate as unmatched content.

Auto-Slide

  1. Auto-Slide

  • Presentations can be configured to step through slides automatically, without any user input.

  • To enable this you will need to specify an interval for slide changes using the autoSlide config option. The interval is provided in milliseconds.

  • // Slide every five seconds
Reveal.initialize({
  autoSlide: 5000,
  loop: true
});

  • A play/pause control element will automatically appear for auto-sliding decks.

  • Sliding is automatically paused if the user starts interacting with the deck.

  • It's also possible to pause or resume sliding by pressing »A« on the keyboard (won't work in the embedded demo here).

  • You can disable the auto-slide controls and prevent sliding from being paused by specifying autoSlideStoppable: false in your config options.

  1. Slide Timing

  • It's also possible to override the slide duration for individual slides and fragments by using the data-autoslide attribute.

  • <section data-autoslide="2000">
  <p>After 2 seconds the first fragment will be shown.</p>
  <p class="fragment" data-autoslide="10000">After 10 seconds the next fragment will be shown.</p>
  <p class="fragment">Now, the fragment is displayed for 2 seconds before the next slide is shown.</p>
</section>
  1. Auto-Slide Method

  • The autoSlideMethod config option can be used to override the default function used for navigation when auto-sliding.

  • We step through all slides, both horizontal and vertical, by default. To only navigate along the top layer and ignore vertical slides, you can set this to Reveal.navigateRight.

    Reveal.configure({
    autoSlideMethod: Reveal.navigateRight
});
  1. Events

  • We fire events whenever auto-sliding is paused or resumed.

  • Reveal.on( 'autoslideresumed', event => { /* ... */ } );
Reveal.on( 'autoslidepaused', event => { /* ... */ } );

Speaker View

  1. Speaker View

  • 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.

  • A speaker timer starts as soon as the speaker view is opened. You can reset the timer by clicking on it.

  • 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.

  • Alternatively you can add your notes in a data-notes attribute on the slide. Like <section data-notes="Something important"></section>.

  • When used locally, this feature requires that reveal.js runs from a local web server.

  • <section>
  <h2>Some Slide</h2>

  <aside class="notes">
    Shhh, these are your private notes 📝
  </aside>
</section>

  • If you're using the Markdown plugin, you can add notes with the help of a special delimiter:

  • <section data-markdown="example.md" data-separator="^\n\n\n"
         data-separator-vertical="^\n\n" data-separator-notes="^Note:">
# Title
## Sub-title

Here is some content...

Note:
This will only display in the notes window.
</section>
  1. Share and Print Speaker Notes
  • 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 configuration value set to true.
  • Notes will appear along the bottom of the presentations.
  • When showNotes is enabled notes are also included when you export to PDF.
  • By default, notes are printed in a box on top of the slide. If you'd rather print them on a separate page, after the slide, set showNotes: "separate-page".
  1. Speaker Notes Clock and Timers
  • The speaker notes window will also show:
  • Time elapsed since the beginning of the presentation. If you hover the mouse above this section, a timer reset button will appear.
  • Current wall-clock time
  • (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).
  • The pacing timer can be enabled by configuring the defaultTiming parameter in the Reveal configuration block, which specifies the number of seconds per slide. 120 can be a reasonable rule of thumb.
  • Alternatively, you can enable the timer by setting totalTime, which sets the total length of your presentation (also in seconds). If both values are specified, totalTime wins and defaultTiming is ignored.
  • Regardless of the baseline timing method, timings can also be given per slide <section> by setting the data-timing attribute (again, in seconds).
  1. Server Side Speaker Notes
  • 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. See https://github.com/reveal/notes-server.

Slide Numbers

  1. Slide Numbers

  • You can display the page number of the current slide by setting the slideNumber config option to true.

  • Reveal.initialize({ slideNumber: true });
  1. Format

  • The slide number format can be customized by setting slideNumber to one of the following values.

  • Value Description
    h.v Horizontal . Vertical slide number (default)
    h/v Horizontal / Vertical slide number
    c Flattened slide number, including both horizontal and vertical slides
    c/t Flattened slide number / total slides 
  • Reveal.initialize({ slideNumber: 'c/t' });

  • If none of the existing formats are to your liking, you can provide a custom slide number generator.

  • Reveal.initialize({ slideNumber: slide => {
    // Ignore numbering of vertical slides
    return [ Reveal.getIndices( slide ).h ];
}});
  1. Context

  • When slide numbers are enabled, they will be included in all contexts by default.

  • If you only want to show slide numbers in a specific context you can set showSlideNumber to one of the following:

  • Value Description
    all Show slide numbers in all contexts (default)
    print Only show slide numbers when printing to PDF
    speaker Only show slide numbers in the speaker view

Touch Navigation

  1. Touch Nabvigation

  • 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.initialize({
  touch: false
})

  • 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.

  • <section>
  <p data-prevent-swipe>
    Can't change slides by swiping across this element.
  </p>
</section>

PDF Export

  1. PDF Export
  1. Instructions
  1. Open your presentation with print-pdf included in the query string, for example: http://localhost:8000/?print-pdf. You can test this at revealjs.com/demo?print-pdf.
  2. Open the in-browser print dialog (CTRL/CMD+P).
  3. Change the Destination setting to Save as PDF.
  4. Change the Layout to Landscape.
  5. Change the Margins to None.
  6. Enable the Background graphics option.
  7. Click Save 🎉
  1. Speaker Notes

  • Your speaker notes can be included in the PDF export by enabling the showNotes.

  • Reveal.configure({ showNotes: true });

  • Notes are printed in an overlay box on top of the slide. If you'd rather print them on a separate page, after the slide, set showNotes to "separate-page".

  • Reveal.configure({ showNotes: 'separate-page' });
  1. Page Numbers
  • If you want to number printed pages, make sure to enable slide numbers.
  1. Page Size

  • Export dimensions are inferred from the configured 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 to using the pdfMaxPagesPerSlide config option.

  • For example, to ensures that no slide ever grows to more than one printed page you can set it to 1.

  • Reveal.configure({ pdfMaxPagesPerSlide: 1 })
  1. Separate Pages for Fragments

  • Fragments are printed on separate slides by default.

  • Meaning if you have a slide with three fragment steps, it will generate three separate slides where the fragments appear incrementally.

  • If you prefer printing all fragments in their visible states on the same slide you can use the pdfSeparateFragments config option.

  • Reveal.configure({ pdfSeparateFragments: false });
  1. Alternative Ways to Export
  • You can also use decktape to convert your presentation to PDF via the command line.

Overview Mode

  1. Overview Mod
  • Press the »ESC« or »O« keys to toggle the overview mode on and off.
  • While you're in this mode, you can still navigate between slides, as if you were at 1,000 feet above your presentation.
  1. API

  • You can use the toggleOverview() API method to activate or deactivate the overview mode from JavaScript.

  • // Switch to the opposite of the current state
Reveal.toggleOverview();

// Activate the overview mode
Reveal.toggleOverview( true );

// Deactivate the overview mode
Reveal.toggleOverview( false );
  1. Events

  • We fire events when the overview mode is activated and deactivated.

  • Reveal.on( 'overviewshown', event => { /* ... */ } );
Reveal.on( 'overviewhidden', event => { /* ... */ } );

Fullscreen Mode

  1. Fullscreen mode
  • There's built-in support for fullscreen mode.
  • Press »F« on your keyboard to view your presentation in fullscreen mode.
  • Once in fullscreen mode, press the »ESC« key to exit.
  • Try it out below. Note that this example uses an embedded presentation, you will need to click to give it focus before pressing F.
posted @ 2021-03-03 22:07  叕叒双又  阅读(403)  评论(0)  编辑  收藏  举报