org-reveal の概要

window.onload =
    (function(document, Reveal) {
        return function() {
            function save(elem) {
                elem.oldCssText = elem.style.cssText;
            }
            function hide(elem) {
                elem.style.display = "none";
            }
            function adjust(elem) {
                elem.style.padding = "0px";
                elem.style.margin = "0px";
                elem.style.maxWidth = "none";
            }
            function restore(elem) {
                elem.style.cssText = elem.oldCssText;
                delete elem.style.oldCssText;
            }
            function forEach(collection, f) {
                for (i = 0; i < collection.length; ++i) {
                    f(collection[i]);
                }
            }

            // to delete
            var header = document.getElementsByClassName("header");
            var post_meta = document.getElementsByClassName("post-meta");
            var prev_next_post = document.getElementsByClassName("prev-next-post");
            var content = document.getElementsByClassName("content");
            var menu = document.getElementById("menu");

            // to adjust
            var reveal = document.getElementsByClassName("reveal")[0];
            var main = document.getElementById("main");
            var layout = document.getElementById("layout");

            // save current css texts. (ugly, but works.)
            forEach(header, save);
            forEach(post_meta, save);
            forEach(prev_next_post, save);
            forEach(content, save);
            save(menu);
            save(main);
            save(reveal);
            save(layout);

            // this checkbox will be provided in posts.
            // for example "<input id="fullScreenFlag"> full screen"
            var checkbox = document.getElementById("fullScreenFlag");
            var to_fullscreen = function() {
                forEach(header, hide);
                forEach(post_meta, hide);
                forEach(prev_next_post, hide);
                forEach(header, adjust);
                forEach(post_meta, adjust);
                forEach(prev_next_post, adjust);
                forEach(content, adjust);
                hide(menu);
                adjust(main);
                adjust(layout);
                reveal.style.cssText = "";
                reveal.style.height = "100vh";
            }
            var to_windowed = function() {
                forEach(header, restore);
                forEach(post_meta, restore);
                forEach(prev_next_post, restore);
                forEach(content, restore);
                restore(menu);
                restore(main);
                restore(reveal);
                restore(layout);
                Reveal.layout();
            }
            checkbox.onchange = function() {
                if (checkbox.checked) {
                    to_fullscreen();
                } else {
                    to_windowed();
                }
            };
        }
    })(document, Reveal);

org-mode でスライドがかける

** 基本

org-mode の 1サブツリー = 1ページ

サブツリーを多めにして書けばそのまま読めるスライドになる

** 基本的な機能

試す

** 遅延表示

#+ATTR_REVEAL: :frag t
こんな

#+ATTR_REVEAL: :frag t
ふうに

#+ATTR_REVEAL: :frag t
一つづつ

#+ATTR_REVEAL: :frag t
出せる

** リンク

[[https://www.google.co.jp/][Google]]

#+ATTR_REVEAL: :frag t
org-mode のものがそのまま使える

** 箇条書き

#+ATTR_REVEAL: :frag (none none t)
- 普通に
- 使える
- 遅延表示にも対応

** 表

| 名前 | スコア |
|------+--------|
| 田中 |     10 |
| 佐藤 |     15 |
| 斎藤 |      5 |

#+ATTR_REVEAL: :frag t :frag_idx 1
アラインには追加の css が必要

#+ATTR_REVEAL: :frag t :frag_idx 1
#+BEGIN_SRC css
.reveal .org-left {
    text-align: left;
}

.reveal .org-right {
    text-align: right;
}
#+END_SRC

** ソースコード

htmlize.el によって emacs と同じハイライトになる。

#+BEGIN_SRC C++
#include <iostream>

int main() {
  std::cout << "hello world" << std::endl;
  return 0;
}
#+END_SRC

#+ATTR_REVEAL: :frag t
(かなり嬉しい)

** 数式

MathJax が使える

#+ATTR_REVEAL: :frag t :frag_idx 1
\begin{align*}
\sin^{2} x + \cos^{2}  x = 1
\end{align*}

** 画像

例: ditaa

#+ATTR_REVEAL: :frag t
#+BEGIN_SRC ditaa :file org-reveal/org-reveal-example.png :exports result :eval no-export
+--------------------------------+
| /--------\ process  /--------\ |
| | data A +--------->| data B | |
| \--------/          \--------/ |
+--------------------------------+
#+END_SRC

#+ATTR_REVEAL: :frag t
#+RESULTS:
[[file:/org-reveal/org-reveal-example.png]]

** 背景画像の変更
:PROPERTIES:
:REVEAL_BACKGROUND: #123456
:REVEAL_BACKGROUND_TRANS: slide
:END:

ここでは色を指定

#+ATTR_REVEAL: :frag t
(画像も指定できるけど、いい画像がなかった。)

** Hack

スライドを埋め込めるようにする

#+ATTR_REVEAL: :frag t
org-reveal.el をちょっといじれば OK

** Hack

埋め込んだスライドをフルスクリーンに切り替える

#+ATTR_REVEAL: :frag t :frag_idx 1
左下のボタンから

#+ATTR_REVEAL: :frag t :frag_idx 2
ちょっと javasctipt をかけば OK

#+ATTR_REVEAL: :frag t :frag_idx 2
本文にソースあり