org-reveal/Readme.org

Introduction to Org-Reveal

• Reveal.js and Org-Reveal
• Requirements and Installation
  • Obtain Reveal.js
  • Obtain org-mode
  • Obtain Org-reveal
• Configuration
  • Set the location of Reveal.js
  • First Try
  • The HLevel
    • HLevel's Affects on Slides Layout
    • Configure HLevel's Value
  • Select Theme and Transition
  • Fragmented Contents
  • Data State
  • Plug-ins
    • Configure Plug-ins
  • Source Codes
• Thanks

Reveal.js and Org-Reveal

• Reveal.js is a tool for creating good look HTML presentations, authored by Hakim El Hattab.
  For an example of reveal.js presentation, click here.
• Org-Reveal exports your Org documents to reveal.js presentations.
  So you can create beautiful presentations with 3D effects from simple but powerful org contents.

Requirements and Installation

• Reveal.js.
• Latest org-mode.
• ox-reveal.el.
• And, of course, emacs.

Obtain Reveal.js

Download Reveal.js packages from here.

Extract reveal.js folders from the downloaded zip file.

Obtain org-mode

Note: Org-reveal relies on the LATEST org-mode export frame work. Pre-packaged org-mode may be out-of-date.

If not sure, use the freshest development codes from git repository.

$ git clone git://orgmode.org/org-mode.git

Follow the online instruction to build and install Org-mode.

TODO Obtain Org-reveal

Obtain latest Org-reveal from github.

Copy ox-reveal.el to the Org-mode install directory.

Add the following statement to your .emacs file.

(require 'ox-reveal)

Configuration

Set the location of Reveal.js

Org-reveal must know where reveal.js is before exporting Org contents.

Default location is ./reveal.js, relative to the Org file.

Change variable org-reveal-root 's value will change the location globally. For example, add the following statement to your .emacs file:

(setq org-reveal-root "d:/reveal.js")

By setting option REVEAL_ROOT, the location is only affected within the Org file.

#+REVEAL_ROOT: d:/reveal.js

First Try

Modifications to .emacs will take effect at next time Emacs starts up.

To wake-up Org-reveal now, type "M-x load-library", then type "ox-reveal".

Now you can export this manual into Reveal.js presentation by typing "C-c C-e R R".

Open the generated "Readme.html" in your browser and enjoy the cool slides.

The HLevel

Org-reveal maps each heading and its contents to one Reveal.js slides. Since Reveal.js arrange slides into a 2-dimentional matrix, Org-reveal use HLevel value to decide map headings to hozirontal or vertical slides.

• Headings of level less or equal to HLevel are mapped to hozirontal slides.
• Headings of deeper levels are mapped to vertical slides.

HLevel's default value is 1, means only level 1 headings are arranged horizontally, deeper headings are mapped to vertical slides below its parent level 1 heading.

HLevel's Affects on Slides Layout

Assume we have a simple Org file as below:

* H1
* H2
** H2.1
*** H2.1.1
* H3

If HLevel is 1, the default value, headings H2.1 and H2.1.1 will be mapping to vertical slides below the slides of heading H2.

If HLevel is changed to 2, slide of heading H2.1 will be changed to the main hozirontal queue, and slide of heading H2.1.1 will be a vertical slide below it.

Configure HLevel's Value

• Change variable org-reveal-hlevel's value to set HLevel globally.
  For example, add the following statement to your .emacs file.

(setq org-reveal-hlevel 2)

• Setting Org files local HLevel to option REVEAL_HLEVEL.

#+REVEAL_HLEVEL 2

Select Theme and Transition

Themes and transitions are set globally throughout the whole file by setting options REVEAL_THEME and REVEAL_TRANS.

For example, check the heading parting of this documents.

Available themes can be find in "css/theme/" in the reveal.js directory.

Available transitions are: default|cube|page|concave|zoom|linear|fade|none.

Fragmented Contents

Make contents fragmented, show up one-by-one, by setting option ATTR_REVEAL with property ":frag frag-style", as illustrated below.

Paragraphs can be fragmented.

Items can be fragmented, too.

Availabe fragment styles are:

• grow

• shrink

• roll-in

• fade-out

• highlight-red

• highlight-green

• highlight-blue

Data State

Set property reveal_data_state to headings to change this slide's style, as illustrated above.

Plug-ins

Reveal.js provides several plug-in functions.

• reveal-control : Show/hide browse control pad.
• reveal-progress : Show/hide progress bar.
• reveal-history : Enable/disable slide history track.
• reveal-center : Enable/disable slide centering.

Configure Plug-ins

Each plug-ins can be set on/off by adding #+OPTIONS tags or settinng custom variables.

• #+OPTIONS tags:
  reveal_control, reveal_progress, reveal_history, reveal_center
• Custom variables:
  org-reveal-control, org-reveal-progress, org-reveal-history, org-reveal-center

Source Codes

Org-reveal use Org-Babel to highlight source codes.

Codes copied from Haskell Wiki.

  fibs = 0 : 1 : next fibs
         where next (a : t@(b:_)) = (a+b) : next t

If you saw odd indentation, please set variable org-html-indent to nil and export again.

Thanks

Courtesy to:

the powerfull Org-mode,

and the impressive Reveal.js