2013-04-28 09:45:05 +02:00
|
|
|
#+Title: Introduction to Org-Reveal
|
|
|
|
#+Author: Yujie Wen
|
|
|
|
#+Email: yjwen.ty@gmail.com
|
|
|
|
|
2013-06-19 11:02:03 +02:00
|
|
|
#+OPTIONS: reveal_center:t reveal_progress:t reveal_history:nil reveal_control:t
|
|
|
|
#+OPTIONS: reveal_mathjax:t reveal_rolling_links:t reveal_keyboard:t reveal_overview:t num:nil
|
|
|
|
#+OPTIONS: reveal_width:1200 reveal_height:800
|
2013-10-10 07:04:02 +02:00
|
|
|
#+OPTIONS: toc:1
|
2013-06-19 11:02:03 +02:00
|
|
|
#+REVEAL_MARGIN: 0.1
|
|
|
|
#+REVEAL_MIN_SCALE: 0.5
|
|
|
|
#+REVEAL_MAX_SCALE: 2.5
|
2013-04-28 09:45:05 +02:00
|
|
|
#+REVEAL_TRANS: cube
|
|
|
|
#+REVEAL_THEME: moon
|
|
|
|
#+REVEAL_HLEVEL: 2
|
2013-06-19 06:11:11 +02:00
|
|
|
#+REVEAL_HEAD_PREAMBLE: <meta name="description" content="Org-Reveal Introduction.">
|
2013-06-19 05:51:33 +02:00
|
|
|
#+REVEAL_POSTAMBLE: <p> Created by yjwen. </p>
|
2014-12-02 16:38:26 +01:00
|
|
|
#+REVEAL_PLUGINS: (highlight markdown notes)
|
2013-06-17 12:04:27 +02:00
|
|
|
|
2013-04-28 09:45:05 +02:00
|
|
|
* Reveal.js and Org-Reveal
|
|
|
|
|
2013-04-28 10:02:48 +02:00
|
|
|
- *Reveal.js* is a tool for creating good-looking HTML presentations,
|
|
|
|
authored by [[hakim.se][Hakim El Hattab]]. \\
|
2013-04-28 09:45:05 +02:00
|
|
|
For an example of reveal.js presentation, click [[http://lab.hakim.se/reveal-js/#/][here]].
|
2014-06-23 22:08:55 +02:00
|
|
|
- *Org-Reveal* exports your [[http://orgmode.org/][Org]] documents to reveal.js
|
2013-04-28 09:45:05 +02:00
|
|
|
presentations.\\
|
2013-04-28 10:02:48 +02:00
|
|
|
With Org-reveal, you can create beautiful presentations with 3D
|
|
|
|
effects from simple but powerful Org contents.
|
2013-04-28 09:45:05 +02:00
|
|
|
|
|
|
|
* Requirements and Installation
|
|
|
|
|
|
|
|
- Reveal.js.
|
|
|
|
- Latest org-mode.
|
|
|
|
- ox-reveal.el.
|
2014-05-14 14:24:06 +02:00
|
|
|
- htmlize.el (optional, for syntax highlighting).
|
2013-04-28 09:45:05 +02:00
|
|
|
- And, of course, emacs.
|
|
|
|
|
|
|
|
** Obtain Reveal.js
|
|
|
|
|
|
|
|
Download Reveal.js packages from [[https://github.com/hakimel/reveal.js/][here]].
|
|
|
|
|
2013-04-28 10:02:48 +02:00
|
|
|
Extract Reveal.js folders from the downloaded zip file.
|
2013-04-28 09:45:05 +02:00
|
|
|
|
2013-11-10 13:13:45 +01:00
|
|
|
If you do not wish you download reveal.js and want to use a CDN
|
|
|
|
version, see the section /Set the location of Reveal.js/
|
|
|
|
|
2013-04-28 09:45:05 +02:00
|
|
|
** Obtain org-mode
|
|
|
|
|
2013-04-28 10:02:48 +02:00
|
|
|
*Note*: Org-reveal relies on the Org-mode 8.0 export frame work.
|
2013-04-28 09:45:05 +02:00
|
|
|
Pre-packaged org-mode may be out-of-date.
|
|
|
|
|
|
|
|
If not sure, use the freshest development codes from git repository.
|
2014-02-11 08:04:00 +01:00
|
|
|
#+BEGIN_SRC sh
|
2013-04-28 09:45:05 +02:00
|
|
|
$ 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.
|
|
|
|
|
2013-04-28 10:02:48 +02:00
|
|
|
** Obtain Org-reveal
|
2013-04-28 09:45:05 +02:00
|
|
|
|
2013-04-28 10:02:48 +02:00
|
|
|
Download latest Org-reveal package from [[https://github.com/yjwen/org-reveal][the Org-reveal GitHub page]].
|
2013-04-28 09:45:05 +02:00
|
|
|
|
2013-04-28 10:02:48 +02:00
|
|
|
Or clone the GitHub repository:
|
|
|
|
#+BEGIN_SRC sh
|
|
|
|
$ git clone https://github.com/yjwen/org-reveal.git
|
|
|
|
#+END_SRC
|
|
|
|
|
|
|
|
Copy =ox-reveal.el= to the Org-mode installation directory.
|
2013-04-28 09:45:05 +02:00
|
|
|
|
|
|
|
Add the following statement to your =.emacs= file.
|
2014-02-11 08:04:00 +01:00
|
|
|
#+BEGIN_SRC lisp
|
2013-04-28 09:45:05 +02:00
|
|
|
(require 'ox-reveal)
|
|
|
|
#+END_SRC
|
|
|
|
|
|
|
|
* Configuration
|
|
|
|
|
|
|
|
** Set the location of Reveal.js
|
|
|
|
|
2013-04-28 10:02:48 +02:00
|
|
|
Org-reveal must know where Reveal.js is on your computer before
|
2013-07-23 08:10:32 +02:00
|
|
|
exporting Org contents. The location of Reveal.js is the path to
|
|
|
|
the top directory of Reveal.js packages, the one which contains
|
|
|
|
file *README.md*, but *not* the one contains file reveal.js.
|
2013-04-28 09:45:05 +02:00
|
|
|
|
2013-04-28 10:02:48 +02:00
|
|
|
The default location is =./reveal.js=, relative to the Org file.
|
2013-04-28 09:45:05 +02:00
|
|
|
|
|
|
|
Change variable =org-reveal-root= 's value will change the location
|
|
|
|
globally. For example, add the following statement to your .emacs
|
|
|
|
file:
|
2014-02-11 08:04:00 +01:00
|
|
|
#+BEGIN_SRC lisp
|
2013-05-15 03:48:34 +02:00
|
|
|
(setq org-reveal-root "file:///d:/reveal.js")
|
2013-04-28 09:45:05 +02:00
|
|
|
#+END_SRC
|
2013-05-15 03:48:34 +02:00
|
|
|
*IMPORTANT*: the absolute path to Reveal.js should be in URL form,
|
2014-11-27 19:44:09 +01:00
|
|
|
"file:///path_to_reveal.js", as illustrated above. By setting
|
|
|
|
option =REVEAL_ROOT=, the location is only affected within the Org
|
|
|
|
file.
|
|
|
|
|
|
|
|
** Url form for file location
|
|
|
|
|
|
|
|
For example if you cloned this repository to your home directory,
|
|
|
|
this file in Mac OS X would be reffered to as
|
|
|
|
"file:///Users/username/org-reveal/readme.org". This file in
|
|
|
|
Ubuntu would be "file:///home/username/org-reveal/readme.org" and
|
|
|
|
in Windows this file would be
|
|
|
|
"file:///c:/Users/username/org-reveal/readme.org". For more detail
|
|
|
|
on this standart please refer to
|
|
|
|
[[http://en.wikipedia.org/wiki/File_URI_scheme]]
|
2013-04-28 09:45:05 +02:00
|
|
|
|
2014-02-11 08:04:00 +01:00
|
|
|
#+BEGIN_SRC org
|
|
|
|
,#+REVEAL_ROOT: file:///d:/reveal.js
|
2013-04-28 09:45:05 +02:00
|
|
|
#+END_SRC
|
|
|
|
|
2013-11-10 13:13:45 +01:00
|
|
|
Set your =REVEAL_ROOT= to the following URL, to use reveal.js from
|
|
|
|
a CDN, instead of downloading your local copy.
|
|
|
|
|
|
|
|
#+BEGIN_SRC org
|
2014-02-11 08:04:00 +01:00
|
|
|
,#+REVEAL_ROOT: http://cdn.jsdelivr.net/reveal.js/2.5.0/
|
2013-11-10 13:13:45 +01:00
|
|
|
#+END_SRC
|
|
|
|
|
|
|
|
|
2013-04-28 09:45:05 +02:00
|
|
|
** First Try
|
|
|
|
|
|
|
|
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
|
2013-04-28 10:02:48 +02:00
|
|
|
slides. Since Reveal.js arranges slides into a 2-dimentional matrix,
|
|
|
|
Org-reveal use a *HLevel* value to decide map headings to hozirontal
|
2013-04-28 09:45:05 +02:00
|
|
|
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.
|
2014-02-11 16:00:43 +01:00
|
|
|
|
2013-04-28 09:45:05 +02:00
|
|
|
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:
|
2014-02-11 08:04:00 +01:00
|
|
|
#+BEGIN_SRC org
|
2013-04-28 09:45:05 +02:00
|
|
|
,* 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.
|
2014-02-11 08:04:00 +01:00
|
|
|
#+BEGIN_SRC lisp
|
2013-04-28 09:45:05 +02:00
|
|
|
(setq org-reveal-hlevel 2)
|
|
|
|
#+END_SRC
|
|
|
|
|
|
|
|
* Setting Org files local HLevel to option =REVEAL_HLEVEL=.
|
2014-02-11 08:04:00 +01:00
|
|
|
#+BEGIN_SRC org
|
2013-04-28 09:45:05 +02:00
|
|
|
,#+REVEAL_HLEVEL 2
|
|
|
|
#+END_SRC
|
|
|
|
|
2013-05-26 06:15:35 +02:00
|
|
|
** Force Split
|
|
|
|
|
|
|
|
If one headings has too many things to fit into one slide, you can
|
|
|
|
split the contents into multiple vertical slides manually, by inserting
|
|
|
|
|
|
|
|
#+BEGIN_SRC org
|
2013-06-19 05:51:33 +02:00
|
|
|
,#+REVEAL: split
|
2013-05-26 06:15:35 +02:00
|
|
|
#+END_SRC
|
|
|
|
|
2013-06-19 11:02:03 +02:00
|
|
|
#+REVEAL: split
|
2013-05-26 06:15:35 +02:00
|
|
|
|
2013-06-19 05:51:33 +02:00
|
|
|
Now a new slide begins after =#+REVEAL= keyword.
|
2013-05-26 06:15:35 +02:00
|
|
|
|
2013-04-28 09:45:05 +02:00
|
|
|
** Select Theme and Transition
|
|
|
|
|
2013-04-28 10:02:48 +02:00
|
|
|
Themes and transition styles are set globally throughout the whole
|
2013-06-08 01:36:41 +02:00
|
|
|
file by setting options =REVEAL_THEME=, =REVEAL_TRANS=, and =REVEAL_SPEED=.
|
2013-04-28 09:45:05 +02:00
|
|
|
|
2013-04-28 10:02:48 +02:00
|
|
|
For an example, please check the heading part of this document.
|
2013-04-28 09:45:05 +02:00
|
|
|
|
2013-04-28 10:02:48 +02:00
|
|
|
Available themes can be found in "css/theme/" in the reveal.js directory.
|
2013-04-28 09:45:05 +02:00
|
|
|
|
|
|
|
Available transitions are: default|cube|page|concave|zoom|linear|fade|none.
|
|
|
|
|
2013-08-12 08:23:43 +02:00
|
|
|
** Set Slide Background
|
|
|
|
|
|
|
|
Slide background can be set to a color, an image or a repeating image
|
|
|
|
array by setting heading properties.
|
|
|
|
|
|
|
|
*** Single Colored Background
|
|
|
|
:PROPERTIES:
|
|
|
|
:reveal_background: #543210
|
|
|
|
:END:
|
|
|
|
|
|
|
|
Set property =reveal_background= to either an RGB color value, or any
|
|
|
|
supported CSS color format.
|
|
|
|
|
|
|
|
#+BEGIN_SRC org
|
|
|
|
,*** Single Colored Background
|
|
|
|
:PROPERTIES:
|
|
|
|
:reveal_background: #123456
|
|
|
|
:END:
|
|
|
|
#+END_SRC
|
|
|
|
|
|
|
|
*** Single Image Background
|
|
|
|
:PROPERTIES:
|
|
|
|
:reveal_background: ./images/whale.jpg
|
|
|
|
:reveal_background_trans: slide
|
|
|
|
:END:
|
|
|
|
|
|
|
|
Set property =reveal_background= to an URL of background image.
|
|
|
|
Set property =reveal_background_trans= to =slide= to make background image
|
|
|
|
sliding rather than fading.
|
|
|
|
#+BEGIN_SRC org
|
|
|
|
,*** Single Image Background
|
|
|
|
:PROPERTIES:
|
|
|
|
:reveal_background: ./images/whale.jpg
|
|
|
|
:reveal_background_trans: slide
|
|
|
|
:END:
|
|
|
|
#+END_SRC
|
|
|
|
|
|
|
|
*** Repeating Image Background
|
|
|
|
:PROPERTIES:
|
|
|
|
:reveal_background: ./images/whale.jpg
|
|
|
|
:reveal_background_size: 200px
|
|
|
|
:reveal_background_repeat: repeat
|
|
|
|
:END:
|
|
|
|
|
|
|
|
Resize background image by setting property
|
|
|
|
=reveal_background_size= to a number.
|
|
|
|
|
|
|
|
Set property =reveal_background_repeat= to =repeat= to repeat
|
|
|
|
image on the background.
|
|
|
|
#+BEGIN_SRC org
|
|
|
|
,*** Repeating Image Background
|
|
|
|
:PROPERTIES:
|
|
|
|
:reveal_background: ./images/whale.jpg
|
|
|
|
:reveal_background_size: 200px
|
|
|
|
:reveal_background_repeat: repeat
|
|
|
|
:END:
|
|
|
|
#+END_SRC
|
|
|
|
|
2013-06-19 11:02:03 +02:00
|
|
|
** Slide Size
|
|
|
|
|
|
|
|
Reveal.js scales slides to best fit the display resolution. But in case
|
|
|
|
the auto-sizes are not satisfiable, you can specify the desired size by
|
|
|
|
option tag =width= and =height=.
|
|
|
|
|
|
|
|
The scaling behavior can also be contrainted by setting following
|
|
|
|
options:
|
|
|
|
* =#+REVEAL_MARGIN:= :: a float number, the factor of empty area
|
|
|
|
surrounding slide contents.
|
|
|
|
* =#+REVEAL_MIN_SCALE:= :: a float number, the minimun scaling down
|
|
|
|
ratio.
|
|
|
|
* =#+REVEAL_MAX_SCALE:= :: a float number, the maximum scaling up
|
|
|
|
ratio.
|
2014-02-11 16:00:43 +01:00
|
|
|
|
|
|
|
** Slide Numbering
|
|
|
|
Activate slide numbers by setting =#+REVEAL-SLIDE-NUMBER:= to =t= (true).
|
|
|
|
|
2013-04-28 09:45:05 +02:00
|
|
|
** Fragmented Contents
|
|
|
|
|
2013-04-28 10:02:48 +02:00
|
|
|
Make contents fragmented (show up one-by-one) by setting option =ATTR_REVEAL= with
|
2013-04-28 09:45:05 +02:00
|
|
|
property ":frag frag-style", as illustrated below.
|
2014-02-11 16:00:43 +01:00
|
|
|
|
2013-04-28 09:45:05 +02:00
|
|
|
#+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
|
2014-11-04 11:38:40 +01:00
|
|
|
|
2014-03-30 09:59:06 +02:00
|
|
|
Use default fragment style by setting ":frag t".
|
2013-04-28 09:45:05 +02:00
|
|
|
|
|
|
|
** Data State
|
|
|
|
:PROPERTIES:
|
|
|
|
:reveal_data_state: alert
|
|
|
|
:END:
|
|
|
|
|
|
|
|
Set property =reveal_data_state= to headings to change this slide's
|
2013-04-28 10:02:48 +02:00
|
|
|
display style, as illustrated above.
|
|
|
|
|
|
|
|
Availabe data states are: alert|blackout|soothe.
|
2013-04-28 09:45:05 +02:00
|
|
|
|
|
|
|
** Plug-ins
|
|
|
|
|
|
|
|
Reveal.js provides several plug-in functions.
|
|
|
|
|
2013-04-28 10:02:48 +02:00
|
|
|
- reveal-control : Show/hide browsing control pad.
|
2013-04-28 09:45:05 +02:00
|
|
|
- reveal-progress : Show/hide progress bar.
|
|
|
|
- reveal-history : Enable/disable slide history track.
|
|
|
|
- reveal-center : Enable/disable slide centering.
|
2014-11-04 11:38:40 +01:00
|
|
|
- multiplex : Enable audience to view presentation on secondary devices.
|
2015-01-12 09:00:37 +01:00
|
|
|
|
2013-04-28 09:45:05 +02:00
|
|
|
*** 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=,
|
2013-06-08 01:36:41 +02:00
|
|
|
=reveal_center=, =reveal_rolling_links=, =reveal_keyboard=, =reveal_overview=
|
2013-04-28 09:45:05 +02:00
|
|
|
- Custom variables:\\
|
|
|
|
=org-reveal-control=, =org-reveal-progress=,
|
2013-06-08 01:36:41 +02:00
|
|
|
=org-reveal-history=, =org-reveal-center=, =org-reveal-rolling-links=, =org-reveal-keyaboard, =org-reveal-overview=
|
2013-04-28 09:45:05 +02:00
|
|
|
|
2013-04-28 10:02:48 +02:00
|
|
|
For an example, please refer to the heading part of this document.
|
2013-04-28 09:45:05 +02:00
|
|
|
** 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
|
|
|
|
|
2014-02-11 08:04:00 +01:00
|
|
|
fibs = 0 : 1 : next fibs
|
|
|
|
where next (a : t@(b:_)) = (a+b) : next t
|
2013-04-28 09:45:05 +02:00
|
|
|
#+END_SRC
|
|
|
|
|
|
|
|
If you saw odd indentation, please set variable =org-html-indent=
|
2013-04-28 10:02:48 +02:00
|
|
|
to =nil= and export again.
|
2013-04-28 09:45:05 +02:00
|
|
|
|
2015-01-12 09:00:37 +01:00
|
|
|
If codes are not highlighted, please make sure =htmlize.el= is
|
2014-06-12 15:38:35 +02:00
|
|
|
installed.
|
|
|
|
|
2013-05-06 05:49:58 +02:00
|
|
|
** MathJax
|
2013-05-31 04:39:56 +02:00
|
|
|
:PROPERTIES:
|
|
|
|
:CUSTOM_ID: my-heading
|
|
|
|
:END:
|
|
|
|
|
2013-05-06 05:49:58 +02:00
|
|
|
|
|
|
|
${n! \over k!(n-k)!} = {n \choose k}$
|
|
|
|
|
|
|
|
LateX equation are renderred in native HTML5 contents.
|
|
|
|
|
|
|
|
*IMPORTANT*: Displaying equations requires internet connection to
|
|
|
|
[[mathjax.org]] or local MathJax installation.
|
|
|
|
|
|
|
|
*IMPORTANT 2*: MathJax is disabled by default to reduce internet
|
|
|
|
traffic. Set =#+OPTIONS= tag =reveal_mathjax= or variable
|
|
|
|
=org-reveal-mathjax= to true to enable it. For local MathJax
|
2014-04-04 11:53:38 +02:00
|
|
|
installation, set option =REVEAL_MATHJAX_URL= to the URL pointing
|
2013-05-15 03:48:34 +02:00
|
|
|
to the local MathJax location.
|
2014-02-11 16:00:43 +01:00
|
|
|
|
2013-06-17 12:04:27 +02:00
|
|
|
** Preamble and Postamble
|
|
|
|
|
|
|
|
You can define preamble and postamble contents which will not be
|
|
|
|
shown as slides, but will be exported into the body part of the
|
|
|
|
generated HTML file, at just before and after the slide contents.
|
|
|
|
|
|
|
|
Change preamble and postamble contents globally by setting variable
|
|
|
|
=org-reveal-preamble= and =org-reveal-postamble=.
|
|
|
|
|
|
|
|
Change preamble and postamble contents locally by setting options
|
|
|
|
=REVEAL_PREAMBLE= and =REVEAL_POSTAMBLE=, as illustrated at the
|
|
|
|
heading part of this document.
|
|
|
|
|
2013-06-19 06:11:11 +02:00
|
|
|
To add custom contents into HTML =<head>= parts, set contents to
|
|
|
|
variable =org-reveal-head-preamble= or option
|
|
|
|
=REVEAL_HEAD_PREAMBLE=.
|
|
|
|
|
2013-06-17 12:04:27 +02:00
|
|
|
*** Generating Pre/Postamble by Emacs-Lisp Functions
|
|
|
|
|
|
|
|
If the contents of pre/postamble is the name of an evaluated
|
|
|
|
Emacs-Lisp funtion, which must accept an argument of Org-mode
|
|
|
|
info and return a string, the returned string will be taken
|
|
|
|
as pre/postamble contents.
|
|
|
|
|
|
|
|
So you can embed the Emacs-Lisp function as an Org-Babel source
|
|
|
|
block and mark it to be evaluated at exporting the document.
|
|
|
|
|
2013-06-19 05:51:33 +02:00
|
|
|
** Raw HTML in Slides
|
|
|
|
|
|
|
|
Besides the Org contents, you can embed raw HTML contents
|
|
|
|
into slides by placing a =#+REVEAL_HTML= keyword.
|
|
|
|
|
|
|
|
Now break time, listen to a girl's song.
|
|
|
|
|
|
|
|
#+REVEAL_HTML: <video src="http://naga-eda.org/home/yujie/lengwanwan_youthtime.mp4"></video>
|
|
|
|
Leng WanWan - Youth times (冷碗碗 青春)
|
|
|
|
|
2013-07-23 08:10:32 +02:00
|
|
|
** Speaker Notes
|
|
|
|
Reveal.js supports speaker notes, which are displayed in a seperate
|
|
|
|
browser window. Press 's' on slide windows will pop up an window
|
|
|
|
displaying current slide, next slide and the speak notes on current
|
|
|
|
slide.
|
|
|
|
|
|
|
|
Org-reveal recognize texts between =#+BEGIN_NOTES= and =#+END_NOTES=
|
|
|
|
as speaker notes. See the example below.
|
|
|
|
|
|
|
|
#+BEGIN_SRC org
|
|
|
|
,* Heading 1
|
|
|
|
Some contents.
|
|
|
|
,#+BEGIN_NOTES
|
|
|
|
Enter speaker notes here.
|
|
|
|
,#+END_NOTES
|
|
|
|
#+END_SRC
|
2013-10-15 05:06:38 +02:00
|
|
|
|
2014-12-02 16:38:26 +01:00
|
|
|
#+REVEAL: split
|
|
|
|
Speaker notes requires the ~notes~ plug-in. If you changed default
|
|
|
|
plug-in setting by specifying =#+REVEAL_PLUGINS= or by setting
|
|
|
|
variable =org-reveal-plugins=, please make sure ~notes~ is in the
|
|
|
|
plug-in list to enable speaker notes.
|
|
|
|
|
2013-10-15 05:06:38 +02:00
|
|
|
#+REVEAL: split
|
|
|
|
|
|
|
|
Due to a bug in Reveal.js, sometimes the speaker notes window
|
|
|
|
shows only blank screens. A workaround to this issue is to put
|
|
|
|
the presentation HTML file into the Reveal.js root directory and
|
|
|
|
reopen it in the brower.
|
|
|
|
|
2014-11-04 11:38:40 +01:00
|
|
|
** Multiplexing
|
|
|
|
Reveal.js supports multiplexing, which allows allows your audience to view
|
|
|
|
the slides of the 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. See a demo at
|
|
|
|
http://revealjs.jit.su/.
|
|
|
|
|
|
|
|
You can enable multiplexing for your slide generation by including the
|
|
|
|
following options:
|
|
|
|
#+BEGIN_SRC org
|
2014-11-04 16:38:43 +01:00
|
|
|
#+REVEAL_MULTIPLEX_ID: [Obtained from the socket.io server. ]
|
|
|
|
#+REVEAL_MULTIPLEX_SECRET: [Obtained from socket.io server. Gives the master control of the presentation.]
|
2014-11-04 11:38:40 +01:00
|
|
|
#+REVEAL_MULTIPLEX_URL: http://revealjs.jit.su:80 [Location of socket.io server]
|
|
|
|
#+REVEAL_MULTIPLEX_SOCKETIO_URL: http://cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.10/socket.io.min.js
|
|
|
|
#+REVEAL_PLUGINS: ([any other plugins you are using] multiplex)
|
|
|
|
#+END_SRC
|
|
|
|
|
|
|
|
You must generate unique values for the =REVEAL_MULTIPLEX_ID= and
|
|
|
|
=REVEAL_MULTIPLEX_SECRET= options, obtaining these from the socket.io server
|
|
|
|
you are using.
|
|
|
|
|
|
|
|
If you include these options in your .org file, reveal-org will enable your
|
|
|
|
.html file as the master file for multiplexing and will generate a file named
|
2014-12-02 16:38:26 +01:00
|
|
|
in the form =[filename]_client.html= in the same directory as the client
|
2014-11-04 11:38:40 +01:00
|
|
|
.html file. Provide your audience with a link to the client file to allow
|
|
|
|
them to track your presentation on their own device.
|
|
|
|
|
2013-10-11 08:18:22 +02:00
|
|
|
** Extra Stylesheets
|
|
|
|
|
|
|
|
Set =REVEAL_EXTRA_CSS= to a stylesheet file path in order to load extra custom
|
|
|
|
styles after loading a theme.
|
|
|
|
|
|
|
|
#+BEGIN_SRC org
|
2014-02-11 08:04:00 +01:00
|
|
|
,#+REVEAL_EXTRA_CSS: url-to-custom-stylesheet.css
|
2013-10-11 08:18:22 +02:00
|
|
|
#+END_SRC
|
|
|
|
|
2014-06-12 15:38:35 +02:00
|
|
|
** Select Built-In Scripts
|
|
|
|
|
|
|
|
Set option =REVEAL_PLUGINS= or variable =org-reveal-plugins= to a
|
|
|
|
lisp list to select built-in scripts.
|
|
|
|
|
|
|
|
Available built-in scripts are:
|
|
|
|
classList/markdown/highlight/zoom/notes/search/remotes.
|
2014-11-04 11:38:40 +01:00
|
|
|
|
|
|
|
Default built-ins are: classList/markdown/highlight/zoom/notes/multiplex.
|
2014-06-12 15:38:35 +02:00
|
|
|
|
|
|
|
The following examples select /markdown/ and /highlight/ only.
|
|
|
|
#+BEGIN_SRC org
|
|
|
|
,#+REVEAL_PLUGINS: (markdown highlight)
|
|
|
|
#+END_SRC
|
2014-11-04 11:38:40 +01:00
|
|
|
|
2013-10-11 08:18:22 +02:00
|
|
|
** Extra Dependent Script
|
|
|
|
|
|
|
|
Set =REVEAL_EXTRA_JS= to the url of extra reveal.js dependent
|
|
|
|
script if necessary.
|
|
|
|
#+BEGIN_SRC org
|
2014-02-11 08:04:00 +01:00
|
|
|
,#+REVEAL_EXTRA_JS: url-to-custom-script.js
|
2013-10-11 08:18:22 +02:00
|
|
|
#+END_SRC
|
|
|
|
|
|
|
|
** Extra Slide attribute
|
|
|
|
|
|
|
|
Set property =reveal_extra_attr= to headings to add any necessary attributes
|
|
|
|
to slides.
|
2013-07-23 08:10:32 +02:00
|
|
|
|
2013-05-21 15:27:34 +02:00
|
|
|
* Tips
|
2013-05-31 04:39:56 +02:00
|
|
|
|
2013-05-21 15:27:34 +02:00
|
|
|
** Disable Heading Numbers
|
|
|
|
|
|
|
|
Add =num:nil= to =#+OPTIONS=
|
|
|
|
#+BEGIN_SRC org
|
2014-02-11 08:04:00 +01:00
|
|
|
,#+OPTIONS: num:nil
|
2013-05-21 15:27:34 +02:00
|
|
|
#+END_SRC
|
2013-05-31 04:39:56 +02:00
|
|
|
|
|
|
|
** Internal Links
|
|
|
|
|
|
|
|
Reveal.js supports only jump between slides, but not between
|
|
|
|
elements on slides. Thus, we can only link to headlines in an Org
|
|
|
|
document.
|
|
|
|
|
|
|
|
You can create links pointings to a headline's text, or its
|
|
|
|
custom-id, as the examples below:
|
|
|
|
|
|
|
|
* [[Tips]].
|
|
|
|
* [[#my-heading][Heading]] with a =CUSTOM_ID= property.
|
|
|
|
|
2013-04-28 09:45:05 +02:00
|
|
|
* Thanks
|
|
|
|
|
|
|
|
Courtesy to:
|
|
|
|
|
|
|
|
#+ATTR_REVEAL: :frag roll-in
|
2014-02-11 16:00:43 +01:00
|
|
|
The powerful Org-mode,
|
2013-05-06 05:49:58 +02:00
|
|
|
#+ATTR_REVEAL: :frag roll-in
|
|
|
|
the impressive Reveal.js
|
2013-04-28 09:45:05 +02:00
|
|
|
#+ATTR_REVEAL: :frag roll-in
|
2013-05-06 05:49:58 +02:00
|
|
|
and the precise MathJax
|