mirror of https://github.com/yjwen/org-reveal.git
234 lines
6.1 KiB
Org Mode
234 lines
6.1 KiB
Org Mode
|
#+Title: Introduction to Org-Reveal
|
||
|
#+Author: Yujie Wen
|
||
|
#+Email: yjwen.ty@gmail.com
|
||
|
|
||
|
#+OPTIONS: reveal_center:nil
|
||
|
#+REVEAL_TRANS: cube
|
||
|
#+REVEAL_THEME: moon
|
||
|
#+REVEAL_HLEVEL: 2
|
||
|
|
||
|
* 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 [[http://lab.hakim.se/reveal-js/#/][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 [[https://github.com/hakimel/reveal.js/][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.
|
||
|
#+BEGIN_SRC sh
|
||
|
$ git clone git://orgmode.org/org-mode.git
|
||
|
#+END_SRC
|
||
|
|
||
|
Follow the [[http://orgmode.org/worg/dev/org-build-system.html][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.
|
||
|
#+BEGIN_SRC lisp
|
||
|
(require 'ox-reveal)
|
||
|
#+END_SRC
|
||
|
|
||
|
* 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:
|
||
|
#+BEGIN_SRC lisp
|
||
|
(setq org-reveal-root "d:/reveal.js")
|
||
|
#+END_SRC
|
||
|
|
||
|
By setting option =REVEAL_ROOT=, the location is only affected
|
||
|
within the Org file.
|
||
|
|
||
|
#+BEGIN_SRC org
|
||
|
,#+REVEAL_ROOT: d:/reveal.js
|
||
|
#+END_SRC
|
||
|
|
||
|
** 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:
|
||
|
#+BEGIN_SRC org
|
||
|
,* H1
|
||
|
,* H2
|
||
|
,** H2.1
|
||
|
,*** H2.1.1
|
||
|
,* H3
|
||
|
#+END_SRC
|
||
|
|
||
|
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.
|
||
|
|
||
|
[[./images/hlevel.png]]
|
||
|
|
||
|
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.
|
||
|
|
||
|
[[./images/hlevel2.png]]
|
||
|
|
||
|
*** 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.
|
||
|
#+BEGIN_SRC lisp
|
||
|
(setq org-reveal-hlevel 2)
|
||
|
#+END_SRC
|
||
|
|
||
|
* Setting Org files local HLevel to option =REVEAL_HLEVEL=.
|
||
|
#+BEGIN_SRC org
|
||
|
,#+REVEAL_HLEVEL 2
|
||
|
#+END_SRC
|
||
|
|
||
|
** 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.
|
||
|
|
||
|
#+ATTR_REVEAL: :frag roll-in
|
||
|
Paragraphs can be fragmented.
|
||
|
|
||
|
#+ATTR_REVEAL: :frag roll-in
|
||
|
Items can be fragmented, too.
|
||
|
|
||
|
Availabe fragment styles are:
|
||
|
#+ATTR_REVEAL: :frag grow
|
||
|
* grow
|
||
|
#+ATTR_REVEAL: :frag shrink
|
||
|
* shrink
|
||
|
#+ATTR_REVEAL: :frag roll-in
|
||
|
* roll-in
|
||
|
#+ATTR_REVEAL: :frag fade-out
|
||
|
* fade-out
|
||
|
#+ATTR_REVEAL: :frag highlight-red
|
||
|
* highlight-red
|
||
|
#+ATTR_REVEAL: :frag highlight-green
|
||
|
* highlight-green
|
||
|
#+ATTR_REVEAL: :frag highlight-blue
|
||
|
* highlight-blue
|
||
|
|
||
|
** Data State
|
||
|
:PROPERTIES:
|
||
|
:reveal_data_state: alert
|
||
|
:END:
|
||
|
|
||
|
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 [[http://www.haskell.org/haskellwiki/The_Fibonacci_sequence][Haskell Wiki]].
|
||
|
#+BEGIN_SRC haskell
|
||
|
|
||
|
fibs = 0 : 1 : next fibs
|
||
|
where next (a : t@(b:_)) = (a+b) : next t
|
||
|
#+END_SRC
|
||
|
|
||
|
If you saw odd indentation, please set variable =org-html-indent=
|
||
|
to nil and export again.
|
||
|
|
||
|
* Thanks
|
||
|
|
||
|
Courtesy to:
|
||
|
|
||
|
#+ATTR_REVEAL: :frag roll-in
|
||
|
the powerfull Org-mode,
|
||
|
#+ATTR_REVEAL: :frag roll-in
|
||
|
and the impressive Reveal.js
|
||
|
|
||
|
|