reveal.js

A framework for easily creating beautiful presentations using HTML.

reveal.js comes with a broad range of features including nested slides, Markdown contents, PDF export, speaker notes and a Reveal.js JavaScript API. It's best viewed in a modern browser but fallbacks are available to make sure your presentation can still be viewed elsewhere.

Reveal.js in Fedwiki

# More reading:

Here we look how we can author a reveal.js presentation using pandoc

The multiplex plugin allows your audience to view the slides of the reveal.js 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.

The Reveal object exposes a JavaScript API for controlling navigation and reading state:

* Installation * Changelog * Examples * Browser Support * Plugins

# 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 slides.com

# Markup

Here's a barebones example of a fully working reveal.js presentation:

<html> <head> <link rel="stylesheet" href="css/reveal.css"> <link rel="stylesheet" href="css/theme/white.css"> </head> <body> <div class="reveal"> <div class="slides"> <section>Slide 1</section> <section>Slide 2</section> </div> </div> <script src="js/reveal.js"></script> <script> Reveal.initialize(); </script> </body> </html>

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:

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

# Markdown

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 <script type="text/template"> like the example below.

<section data-markdown> <script type="text/template"> ## Page title A paragraph with some text and a [link](http://hakim.se). </script> </section>

This is based on data-markdown from Paul Irish modified to use marked to support GitHub Flavored Markdown. Sensitive to indentation (avoid mixing tabs and spaces) and line breaks (avoid consecutive breaks).

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

# Element Attributes

Special syntax (in html comment) is available for adding attributes to Markdown elements. This is useful for fragments, amongst other things.

<section data-markdown> <script type="text/template"> - Item 1  - Item 2  </script> </section> Slide Attributes

Special syntax (in html comment) is available for adding attributes to the slide <section> elements generated by your Markdown.

<section data-markdown> <script type="text/template">  Markdown content </script> </section>

# Full setup

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. * Install Node.js * Install Grunt

Clone the reveal.js repository:

git clone https://github.com/hakimel/reveal.js.git

Navigate to the reveal.js folder:

cd reveal.js

Install dependencies:

npm install

Serve the presentation and monitor source files for changes:

grunt serve

Open http://localhost:8000 to view your presentation. You can change the port by using grunt serve --port 8001.

# Folder Structure

* __css/__ Core styles without which the project does not function * __js/__ Like above but for JavaScript * __plugin/__ Components that have been developed as extensions to reveal.js * __lib/__ All other third party assets (JavaScript, CSS, fonts)