Skip to content

For reveal.js

Jump to bottom
Frederick Feibel edited this page Oct 21, 2016 · 4 revisions

Refer to https://github.com/hakimel/reveal.js/ for more information about this presentation framework.

Defaults

Nested slides

Nested section tags will be included as sub-titles in the generated table of contents

An exception to the "Untitled Slide" rule is a stack of slides with a main heading:

<section>
    <h2>table of contents title</h2>
    <section>
        <p>No title</p>
    </section>
</section>

In this scenario, the first nested section tag does not have a title, so it will be omitted from the TOC and the main heading will be used instead.

Installation

The following instructions apply to reveal.js >= 1.5.

1. Place the following in the <head> tag

<link rel="stylesheet" href="path/to/presentable.css">

2. Modify the first <section> tag to look like this

<section>
    <section>
        <h1>Your Presentation Title Here</h1>
        <!-- Depending  on your version of reveal.js you may also
        have a script tag in this section -->
    </section>
    <section>
        <h2>Table of Contents</h2>
        <nav id="presentable-toc" class="revealjs"></nav>
    </section>
</section>

3.Put the icon code below the .slides <div>

</div><!--this is the closing .slides div-->

<aside id="presentable-icon" class="revealjs">
    <a title="Table of Contents" href="#/0/1">
        <img alt="Table of Contents" src="path/to/revealjs.png"/>
    </a>
</aside>

4. Use Reveal.initialize() to extend the presentation framework. Initialization is done with a callback function.

Reveal.initialize({
    // Other configs...
    dependencies: [
        // Not all dependencies shown...
        { src: 'lib/js/data-markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
        // presentable.js must come after data-markdown.js
        { src: 'path/to/presentable.js', callback: function() { presentable.toc({framework: "revealjs"}); } }
    ]
});

Instructions for reveal.js < 1.5

The following are instructions for adding Presentable JavaScript. The HTML and CSS instructions don't vary for the different versions and can be found in the regular documentation.

JavaScript

Versions <= 1.3

Place the following towards the bottom of the presentation source code file with the other <script> tags:

<script src="path/to/presentable.js"></script>

Version 1.4

Use head.js() to load presentable.js by adding 'path/to/presentable.js' as demonstrated below:

head.js( !document.body.classList ? 'lib/js/classList.js' : null )
.js( 'js/reveal.js', 'path/to/presentable.js', function() {

Initialization

Version <= 1.4 Place presentable.toc() before Reveal.initialize()

presentable.toc({
    framework: "revealjs"
});

Reveal.initialize({...

The table of contents HTML must be in the DOM before Reveal is initialized so that the fancy roling effect will be applied to the links in the table of contents.

Clone this wiki locally