鴨川にあこがれる日々

軽い技術っぽい記事かいてます

org modeからreveal.jsを出力する話

はじめに

言語処理の記事がブクマをたくさんいただいて驚いております nzwです.nzw.hatenablog.jp


スライドは何で作っていますでしょうか?

とかいろいろありますね.

数式が出てくる分野にいるため可能なかぎり数式を使い回したいです.
というわけで普段はemacsのorg modeを使っています.orgmode.org


org modeでスライドを作るとなるとbeamerで十分なのですが,設定をいじるのがちょっとめんどうです.
加えておしゃれなスライドが作りたいと思ったので,reveal.jsが目につきました.
パッケージを探したらorgmodeからreveal.jsのスライドに変換するものがあったので,簡単にまとめてみました.


こんなのができます.
emacsでreveal.js


詳しい話はこちらをgithub.com

reveal.jsをemacsなんて使わないでkeynoteで作るみたいにGUIで操作したい方はslides.com
が良いかと思います.

環境設定

前提条件

  • yosemiteのみ動作を確認しましたが,他のOSでも多分できると思います.
  • emacs24.5(preludeを使っています)
  • org modeはわかること

インストールなど

emacsでM-x package-list-packge RETして

  • ox-reveal
  • htmlize

をいれてください.

~/.emacs.d/personal/hogehoge.el
に設定を書いている場合は

(require 'ox-reveal)

を追加してください.

reveal.jsも必要になります.
ネット環境がなくてもreveal.jsを使いたい場合は,reveal.jsを落としてください.
今回は落とさずにCDNのリンクからreveal.jsを読み込んでいます.

コード

上で見せたスライドのソースコードがこれになります.
Ctr-c Ctr-e R B でhtmlのスライドに変換されます.

#+REVEAL_ROOT: http://cdn.jsdelivr.net/reveal.js/latest/
#+REVEAL_MATHJAX_URL: https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML
#+OPTIONS: reveal_mathjax:t
#+TITLE: emacsでreveal.js
#+AUTHOR: nozawa0301
#+EMAIL:

* requirement

#+ATTR_REVEAL: :flag t

- emacs
- ox-reveal
- reveal.js
- htmlize

* ソースコード
juliaもハイライトバッチリ

#+BEGIN_SRC julia
function fx(x)
    x^100
end
const x = 100
println(fx(x))
#+END_SRC

* 画像
[[file:./twitter_icon.jpeg]]

画像ももちろんつかえます

* 数式
   ${n! \over k!(n-k)!} = {n \choose k}$

   mathjaxを読み込めば,数式も
* 画像背景
    :PROPERTIES:
    :reveal_background: ./twitter_icon.jpeg
    :reveal_background_trans: slide
    :END:

背景を画像や単一色にできます.

テーマもいくつかあるのでお好みで

* 箇条書きなど
#+ATTR_REVEAL: :frag t
  - 箇条書き
    - これ
  - 番号付きリスト


下にスクルロールしてください↓

** 番号付き
#+ATTR_REVEAL: :frag roll-in
    1. one
    2. two
    3. three
    4. four

* リンク
  [[http://nzw.hatenablog.jp/][クリックするととびます]]

* 終わり
ありがとうございました

#+REVEAL_ROOTで使用するreveal.jsを指定します.
#+REVEAL_MATHJAX_URLは数式を使うため必要です.これを書いてその下の行の
#+OPTIONS: reveal_mathjax:t で有効になります

*で1枚のスライドができます.初期設定では横に進みます.
** で下にスライドを作ります.

スライドのテーマはここgithub.com
にあるものを指定できます.

例えば blood.cssのテーマを使いたいのであれば,

#+REVEAL_THEME: blood

と先ほどのファイルの上部に追記してください.

所感

サクッと作れました.いいですね.
箇条書きやスライドの背景などに手を加える場合は少し設定を書く必要がありますが,githubに書いてあるので,難しくありませんでした.