mirror of https://github.com/yjwen/org-reveal.git
537 lines
14 KiB
HTML
Executable File
537 lines
14 KiB
HTML
Executable File
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>(Introduction to Org-Reveal)</title>
|
|
<meta name="author" content="(Yujie Wen)"/>
|
|
<link rel="stylesheet" href="./reveal.js/css/reveal.min.css">
|
|
<link rel="stylesheet" href="./reveal.js/css/theme/moon.css" id="theme"></head>
|
|
<body>
|
|
<div class="reveal">
|
|
<div class="slides">
|
|
<section>
|
|
<h1>Introduction to Org-Reveal</h1>
|
|
<h2>Yujie Wen</h2>
|
|
<h2><a href="mailto:yjwen.ty@gmail.com">yjwen.ty@gmail.com</a></h2>
|
|
<h2></h2></section>
|
|
<section>
|
|
<div id="table-of-contents">
|
|
<h2>Table of Contents</h2>
|
|
<div id="text-table-of-contents">
|
|
<ul>
|
|
<li><a href="#sec-1">1. Reveal.js and Org-Reveal</a></li>
|
|
<li><a href="#sec-2">2. Requirements and Installation</a>
|
|
<ul>
|
|
<li><a href="#sec-2-1">2.1. Obtain Reveal.js</a></li>
|
|
<li><a href="#sec-2-2">2.2. Obtain org-mode</a></li>
|
|
<li><a href="#sec-2-3">2.3. Obtain Org-reveal</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="#sec-3">3. Configuration</a>
|
|
<ul>
|
|
<li><a href="#sec-3-1">3.1. Set the location of Reveal.js</a></li>
|
|
<li><a href="#sec-3-2">3.2. First Try</a></li>
|
|
<li><a href="#sec-3-3">3.3. The HLevel</a>
|
|
<ul>
|
|
<li><a href="#sec-3-3-1">3.3.1. HLevel's Affects on Slides Layout</a></li>
|
|
<li><a href="#sec-3-3-2">3.3.2. Configure HLevel's Value</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="#sec-3-4">3.4. Select Theme and Transition</a></li>
|
|
<li><a href="#sec-3-5">3.5. Fragmented Contents</a></li>
|
|
<li><a href="#sec-3-6">3.6. Data State</a></li>
|
|
<li><a href="#sec-3-7">3.7. Plug-ins</a>
|
|
<ul>
|
|
<li><a href="#sec-3-7-1">3.7.1. Configure Plug-ins</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="#sec-3-8">3.8. Source Codes</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="#sec-4">4. Thanks</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
|
|
<h2><span class="section-number-2">1</span> Reveal.js and Org-Reveal</h2>
|
|
<div class="outline-text-2" id="text-1">
|
|
<ul class="org-ul">
|
|
<li><b>Reveal.js</b> is a tool for creating good-looking HTML presentations,
|
|
authored by <i>Hakim El Hattab</i>. <br/>
|
|
For an example of reveal.js presentation, click <a href="http://lab.hakim.se/reveal-js/#/">here</a>.
|
|
</li>
|
|
<li><b>Org-Reveal</b> exports your <i>Org</i> documents to reveal.js
|
|
presentations.<br/>
|
|
With Org-reveal, you can create beautiful presentations with 3D
|
|
effects from simple but powerful Org contents.
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
<section>
|
|
|
|
<h2><span class="section-number-2">2</span> Requirements and Installation</h2>
|
|
<div class="outline-text-2" id="text-2">
|
|
<ul class="org-ul">
|
|
<li>Reveal.js.
|
|
</li>
|
|
<li>Latest org-mode.
|
|
</li>
|
|
<li>ox-reveal.el.
|
|
</li>
|
|
<li>And, of course, emacs.
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
</section>
|
|
<section>
|
|
<section>
|
|
|
|
<h3><span class="section-number-3">2.1</span> Obtain Reveal.js</h3>
|
|
<div class="outline-text-3" id="text-2-1">
|
|
<p>
|
|
Download Reveal.js packages from <a href="https://github.com/hakimel/reveal.js/">here</a>.
|
|
</p>
|
|
|
|
<p>
|
|
Extract Reveal.js folders from the downloaded zip file.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
<section>
|
|
<section>
|
|
|
|
<h3><span class="section-number-3">2.2</span> Obtain org-mode</h3>
|
|
<div class="outline-text-3" id="text-2-2">
|
|
<p>
|
|
<b>Note</b>: Org-reveal relies on the Org-mode 8.0 export frame work.
|
|
Pre-packaged org-mode may be out-of-date.
|
|
</p>
|
|
|
|
<p>
|
|
If not sure, use the freshest development codes from git repository.
|
|
</p>
|
|
<div class="org-src-container">
|
|
|
|
<pre class="src src-sh">$ git clone git://orgmode.org/org-mode.git
|
|
</pre>
|
|
</div>
|
|
|
|
<p>
|
|
Follow the <a href="http://orgmode.org/worg/dev/org-build-system.html">online instruction</a> to build and install Org-mode.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
<section>
|
|
<section>
|
|
|
|
<h3><span class="section-number-3">2.3</span> Obtain Org-reveal</h3>
|
|
<div class="outline-text-3" id="text-2-3">
|
|
<p>
|
|
Download latest Org-reveal package from <a href="https://github.com/yjwen/org-reveal">the Org-reveal GitHub page</a>.
|
|
</p>
|
|
|
|
<p>
|
|
Or clone the GitHub repository:
|
|
</p>
|
|
<div class="org-src-container">
|
|
|
|
<pre class="src src-sh">$ git clone https://github.com/yjwen/org-reveal.git
|
|
</pre>
|
|
</div>
|
|
|
|
<p>
|
|
Copy <code>ox-reveal.el</code> to the Org-mode installation directory.
|
|
</p>
|
|
|
|
<p>
|
|
Add the following statement to your <code>.emacs</code> file.
|
|
</p>
|
|
<div class="org-src-container">
|
|
|
|
<pre class="src src-lisp">(<span style="color: #a020f0;">require</span> '<span style="color: #008b8b;">ox-reveal</span>)
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
<section>
|
|
|
|
<h2><span class="section-number-2">3</span> Configuration</h2>
|
|
<div class="outline-text-2" id="text-3">
|
|
</div></section>
|
|
<section>
|
|
<section>
|
|
|
|
<h3><span class="section-number-3">3.1</span> Set the location of Reveal.js</h3>
|
|
<div class="outline-text-3" id="text-3-1">
|
|
<p>
|
|
Org-reveal must know where Reveal.js is on your computer before
|
|
exporting Org contents.
|
|
</p>
|
|
|
|
<p>
|
|
The default location is <code>./reveal.js</code>, relative to the Org file.
|
|
</p>
|
|
|
|
<p>
|
|
Change variable <code>org-reveal-root</code> 's value will change the location
|
|
globally. For example, add the following statement to your .emacs
|
|
file:
|
|
</p>
|
|
<div class="org-src-container">
|
|
|
|
<pre class="src src-lisp">(setq org-reveal-root <span style="color: #8b2252;">"d:/reveal.js"</span>)
|
|
</pre>
|
|
</div>
|
|
|
|
<p>
|
|
By setting option <code>REVEAL_ROOT</code>, the location is only affected
|
|
within the Org file.
|
|
</p>
|
|
|
|
<div class="org-src-container">
|
|
|
|
<pre class="src src-org"><span style="color: #b22222;">#+REVEAL_ROOT: d:/reveal.js</span>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
<section>
|
|
<section>
|
|
|
|
<h3><span class="section-number-3">3.2</span> First Try</h3>
|
|
<div class="outline-text-3" id="text-3-2">
|
|
<p>
|
|
To wake-up Org-reveal now, type "M-x load-library", then type
|
|
"ox-reveal".
|
|
</p>
|
|
|
|
<p>
|
|
Now you can export this manual into Reveal.js presentation by
|
|
typing "C-c C-e R R".
|
|
</p>
|
|
|
|
<p>
|
|
Open the generated "Readme.html" in your browser and enjoy the
|
|
cool slides.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
<section>
|
|
<section>
|
|
|
|
<h3><span class="section-number-3">3.3</span> The HLevel</h3>
|
|
<div class="outline-text-3" id="text-3-3">
|
|
<p>
|
|
Org-reveal maps each heading and its contents to one Reveal.js
|
|
slides. Since Reveal.js arranges slides into a 2-dimentional matrix,
|
|
Org-reveal use a <b>HLevel</b> value to decide map headings to hozirontal
|
|
or vertical slides.
|
|
</p>
|
|
|
|
<ul class="org-ul">
|
|
<li>Headings of level less or equal to HLevel are mapped to hozirontal
|
|
slides.
|
|
</li>
|
|
<li>Headings of deeper levels are mapped to vertical slides.
|
|
</li>
|
|
</ul>
|
|
|
|
<p>
|
|
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.
|
|
</p>
|
|
</div>
|
|
|
|
</section>
|
|
<section>
|
|
|
|
<h4><span class="section-number-4">3.3.1</span> HLevel's Affects on Slides Layout</h4>
|
|
<div class="outline-text-4" id="text-3-3-1">
|
|
<p>
|
|
Assume we have a simple Org file as below:
|
|
</p>
|
|
<div class="org-src-container">
|
|
|
|
<pre class="src src-org"><span style="color: #0000ff;">* H1</span>
|
|
<span style="color: #0000ff;">* H2</span>
|
|
<span style="color: #a0522d;">** H2.1</span>
|
|
<span style="color: #a020f0;">*** H2.1.1</span>
|
|
<span style="color: #0000ff;">* H3</span>
|
|
</pre>
|
|
</div>
|
|
|
|
<p>
|
|
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.
|
|
</p>
|
|
|
|
|
|
<div class="figure">
|
|
<p><img src="./images/hlevel.png" alt="hlevel.png"/></p>
|
|
</div>
|
|
|
|
<p>
|
|
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.
|
|
</p>
|
|
|
|
|
|
<div class="figure">
|
|
<p><img src="./images/hlevel2.png" alt="hlevel2.png"/></p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section>
|
|
|
|
<h4><span class="section-number-4">3.3.2</span> Configure HLevel's Value</h4>
|
|
<div class="outline-text-4" id="text-3-3-2">
|
|
<ul class="org-ul">
|
|
<li>Change variable <code>org-reveal-hlevel</code>'s value to set HLevel globally.<br/>
|
|
For example, add the following statement to your <code>.emacs</code> file.
|
|
</li>
|
|
</ul>
|
|
<div class="org-src-container">
|
|
|
|
<pre class="src src-lisp">(setq org-reveal-hlevel 2)
|
|
</pre>
|
|
</div>
|
|
|
|
<ul class="org-ul">
|
|
<li>Setting Org files local HLevel to option <code>REVEAL_HLEVEL</code>.
|
|
</li>
|
|
</ul>
|
|
<div class="org-src-container">
|
|
|
|
<pre class="src src-org"><span style="color: #b22222;">#+REVEAL_HLEVEL 2</span>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
<section>
|
|
<section>
|
|
|
|
<h3><span class="section-number-3">3.4</span> Select Theme and Transition</h3>
|
|
<div class="outline-text-3" id="text-3-4">
|
|
<p>
|
|
Themes and transition styles are set globally throughout the whole
|
|
file by setting options <code>REVEAL_THEME</code> and <code>REVEAL_TRANS</code>.
|
|
</p>
|
|
|
|
<p>
|
|
For an example, please check the heading part of this document.
|
|
</p>
|
|
|
|
<p>
|
|
Available themes can be found in "css/theme/" in the reveal.js directory.
|
|
</p>
|
|
|
|
<p>
|
|
Available transitions are: default|cube|page|concave|zoom|linear|fade|none.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
<section>
|
|
<section>
|
|
|
|
<h3><span class="section-number-3">3.5</span> Fragmented Contents</h3>
|
|
<div class="outline-text-3" id="text-3-5">
|
|
<p>
|
|
Make contents fragmented (show up one-by-one) by setting option <code>ATTR_REVEAL</code> with
|
|
property ":frag frag-style", as illustrated below.
|
|
</p>
|
|
|
|
<p class="fragment roll-in">
|
|
Paragraphs can be fragmented.
|
|
</p>
|
|
|
|
<p class="fragment roll-in">
|
|
Items can be fragmented, too.
|
|
</p>
|
|
|
|
<p>
|
|
Availabe fragment styles are:
|
|
</p>
|
|
<ul class="org-ul">
|
|
<li class="fragment grow">grow
|
|
</li>
|
|
</ul>
|
|
<ul class="org-ul">
|
|
<li class="fragment shrink">shrink
|
|
</li>
|
|
</ul>
|
|
<ul class="org-ul">
|
|
<li class="fragment roll-in">roll-in
|
|
</li>
|
|
</ul>
|
|
<ul class="org-ul">
|
|
<li class="fragment fade-out">fade-out
|
|
</li>
|
|
</ul>
|
|
<ul class="org-ul">
|
|
<li class="fragment highlight-red">highlight-red
|
|
</li>
|
|
</ul>
|
|
<ul class="org-ul">
|
|
<li class="fragment highlight-green">highlight-green
|
|
</li>
|
|
</ul>
|
|
<ul class="org-ul">
|
|
<li class="fragment highlight-blue">highlight-blue
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
<section>
|
|
<section data-state="alert">
|
|
|
|
<h3><span class="section-number-3">3.6</span> Data State</h3>
|
|
<div class="outline-text-3" id="text-3-6">
|
|
|
|
<p>
|
|
Set property <code>reveal_data_state</code> to headings to change this slide's
|
|
display style, as illustrated above.
|
|
</p>
|
|
|
|
<p>
|
|
Availabe data states are: alert|blackout|soothe.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
<section>
|
|
<section>
|
|
|
|
<h3><span class="section-number-3">3.7</span> Plug-ins</h3>
|
|
<div class="outline-text-3" id="text-3-7">
|
|
<p>
|
|
Reveal.js provides several plug-in functions.
|
|
</p>
|
|
|
|
<ul class="org-ul">
|
|
<li>reveal-control : Show/hide browsing control pad.
|
|
</li>
|
|
<li>reveal-progress : Show/hide progress bar.
|
|
</li>
|
|
<li>reveal-history : Enable/disable slide history track.
|
|
</li>
|
|
<li>reveal-center : Enable/disable slide centering.
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
</section>
|
|
<section>
|
|
|
|
<h4><span class="section-number-4">3.7.1</span> Configure Plug-ins</h4>
|
|
<div class="outline-text-4" id="text-3-7-1">
|
|
<p>
|
|
Each plug-ins can be set on/off by adding <code>#+OPTIONS</code> tags or
|
|
settinng custom variables.
|
|
</p>
|
|
|
|
<ul class="org-ul">
|
|
<li><code>#+OPTIONS</code> tags:<br/>
|
|
<code>reveal_control</code>, <code>reveal_progress</code>, <code>reveal_history</code>,
|
|
<code>reveal_center</code>
|
|
</li>
|
|
<li>Custom variables:<br/>
|
|
<code>org-reveal-control</code>, <code>org-reveal-progress</code>,
|
|
<code>org-reveal-history</code>, <code>org-reveal-center</code>
|
|
</li>
|
|
</ul>
|
|
|
|
<p>
|
|
For an example, please refer to the heading part of this document.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
<section>
|
|
<section>
|
|
|
|
<h3><span class="section-number-3">3.8</span> Source Codes</h3>
|
|
<div class="outline-text-3" id="text-3-8">
|
|
<p>
|
|
Org-reveal use Org-Babel to highlight source codes.
|
|
</p>
|
|
|
|
<p>
|
|
Codes copied from <a href="http://www.haskell.org/haskellwiki/The_Fibonacci_sequence">Haskell Wiki</a>.
|
|
</p>
|
|
<div class="org-src-container">
|
|
|
|
<pre class="src src-haskell"><span style="color: #0000ff;">fibs</span> <span style="color: #a0522d;">=</span> 0 <span style="color: #228b22;">:</span> 1 <span style="color: #228b22;">:</span> next fibs
|
|
<span style="color: #a020f0;">where</span> next (a <span style="color: #228b22;">:</span> t<span style="color: #a0522d;">@</span>(b<span style="color: #228b22;">:</span><span style="color: #a020f0;">_</span>)) <span style="color: #a0522d;">=</span> (a<span style="color: #a0522d;">+</span>b) <span style="color: #228b22;">:</span> next t
|
|
</pre>
|
|
</div>
|
|
|
|
<p>
|
|
If you saw odd indentation, please set variable <code>org-html-indent</code>
|
|
to <code>nil</code> and export again.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
<section>
|
|
|
|
<h2><span class="section-number-2">4</span> Thanks</h2>
|
|
<div class="outline-text-2" id="text-4">
|
|
<p>
|
|
Courtesy to:
|
|
</p>
|
|
|
|
<p class="fragment roll-in">
|
|
the powerfull Org-mode,
|
|
</p>
|
|
<p class="fragment roll-in">
|
|
and the impressive Reveal.js
|
|
</p>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
<script src="./reveal.js/lib/js/head.min.js"></script>
|
|
<script src="./reveal.js/js/reveal.min.js"></script>
|
|
<script>
|
|
|
|
// Full list of configuration options available here:
|
|
// https://github.com/hakimel/reveal.js#configuration
|
|
Reveal.initialize({
|
|
controls: true,
|
|
progress: true,
|
|
history: true,
|
|
center: false,
|
|
|
|
theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
|
|
transition: Reveal.getQueryHash().transition || 'cube', // default/cube/page/concave/zoom/linear/fade/none
|
|
|
|
// Optional libraries used to extend on reveal.js
|
|
dependencies: [
|
|
{ src: './reveal.js/lib/js/classList.js', condition: function() { return !document.body.classList; } },
|
|
{ src: './reveal.js/plugin/markdown/showdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
|
|
{ src: './reveal.js/plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
|
|
{ src: './reveal.js/plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
|
|
{ src: './reveal.js/plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
|
|
{ src: './reveal.js/plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
|
|
// { src: './reveal.js/plugin/search/search.js', async: true, condition: function() { return !!document.body.classList; } }
|
|
// { src: './reveal.js/plugin/remotes/remotes.js', async: true, condition: function() { return !!document.body.classList; } }
|
|
]
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|