Safx: Pandocでreveal.jsを利用したプレゼンテーションスライドを作成する

Pandocのバージョン1.12からreveal.jsを利用したスライドショーファイルが出力できるようになっていたのでmarkdownからの変換を試してみました。

なお、Pandoc自体の導入や使いかたなどは以前の記事「PandocでMarkdownからHTMLプレゼンテーションを作成する」を参照してください。

reveal.jsの導入とpandocでの変換

reveal.jsを取得後に、そのままpandocを実行するだけです。

$ git clone https://github.com/hakimel/reveal.js.git
$ pandoc -s -t revealjs -i -V theme:default -o slide.html my_presentation.md

Pandocのデフォルトではsimple.cssというおもしろみのないテーマが選択されてしまうので、-Vでreveal.jsのデフォルトテーマを選択しています。

なお、--self-containedは指定できますが、作成したスライドがChrome, Safari共に開けなかったので利用しないほうがよいでしょう。

reveal.jsには2次元的にスライドを配置する機能があり、Pandocでもそれを利用できます。

markdownでは#と##を入れておけば自動で2次元配置にするときもありますが、明示的に--slide-level=2を指定するほうがよいでしょう。

例えば、次のようなmarkdownファイルは、

% title
% author
% date

# スライド 1

## スライド 1-1

foo

## スライド 1-2

bar

# スライド 2

## スライド 2-1

hoge

このように変換されます。

ただし、reveal.jsを利用する場合には次のような注意点があります。

2.については「スライド 1–1」などはreveal.jsでは<H2>を利用するようになっていますが、Pandocでは<H1>になってしまいます。

ここらへんはPandoc側が対応してくれればよいのですが、markdownの修正だけでオリジナルのように見せるためには、次のようにする必要があります。

上の例で言うと次のような感じです。

% title
% author
% date

# スライド 1

----

### スライド 1-1

foo

----

### スライド 1-2

bar

# スライド 2

----

### スライド 2-1

hoge

markdownがとても汚なくなりましたが、とりあえずreveal.jsっぽくなりました。

1次元スライドでも、##を利用して--slide-level=1を指定しないとreveal.jsがデフォルトで想定したスタイルにならないので注意してください。

どこがスライドの切れ目になるのかは、公式ドキュメントを参照ください。

Haskell Platform 2013.2.0.0 (ghc–7.6)ではXcode 5でコンパイルできないので注意してください。

Data/Aeson/TH.hs:3:4:
     error: invalid preprocessing directive
      #-}
       ^

Pandocでreveal.jsを利用したプレゼンテーションスライドを作成してみました。