A framework for easily creating beautiful presentations using HTML.
# 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
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>
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.
<section data-markdown="example.md" data-separator="^\n\n\n" data-separator-vertical="^\n\n" data-separator-notes="^Note:" data-charset="iso-8859-15"> </section>
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 <!-- .element: class="fragment" data-fragment-index="2" --> - Item 2 <!-- .element: class="fragment" data-fragment-index="1" --> </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"> <!-- .slide: data-background="#ff0000" --> 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:
Serve the presentation and monitor source files for changes:
Open http://localhost:8000 to view your presentation. You can change the port by using grunt serve --port 8001.
# Folder Structure
# See also