pandocを使用してreveal.jsのスライドを生成する方法
簡易なスライドを作成するとき、pandocを使用してreveal.js形式のスライドを生成しているのだが、毎回その方法を忘れるので、メモとしてこれを残す。
pandocとは
- pandocとは、ドキュメントを様々なフォーマットに変換することのできるツールである。例えば、markdownで記入した文章をLaTexやPDFに変換するということが出来る。
reveal.jsとは
- reveal.jsとは、HTMLプレゼンテーションフレームワークで、例えばこんな感じのスライドを簡単に作ることができる便利なツールである。HTMLなので、CSSを調整すれば、色々とデザインの工夫も出来る。
スライドの作成方法
- pandocを使うことでmarkdownをreveal.js形式に変換することが出来るので、その機能を活用する。
以下で具体的な手順を述べる。
- まずpandocをインストールする(Arch Linux)
yay -S pandoc
- reveal.jsをcloneする
git clone https://github.com/hakimel/reveal.js.git
基本的には環境構築は以上で、あとはmarkdownを用意して、それをpandocで変換するだけである。
ディレクトリ構成（例）
sample-reveal
├── Makefile
├── README.md
├── images
│ └── sample.svg
├── input.md
├── reveal.js
├── style.css
-
ディレクトリ構成の説明
- images配下にはスライドで使用する画像を配置してある
- Makefileにはpandocの変換コマンドやgithub pagesへのアップロードなど、よく使うコマンドをまとめている
- input.mdは変換対象となるmarkdownファイル
- style.cssは変換する際に適用されるcss（わざわざcssファイルを用意しなくてもデフォルトのものがあるので、そのテーマを使うことも出来る）
-
変換に必須なのはimput.mdとreveal.js
pandocの使い方
- pandocでreveal.jsに変換する際のコマンド（例）
pandoc -t revealjs -s -c style.css -V transition=fade --self-contained input.md -o index.html --slide-level=2
私はよくこのコマンドをよく使うので、これをMakefileにまとめている。
- pandocの詳しい使い方は公式ガイドを参照。用途に合わせて、先程のコマンドを工夫すればよい。
以上のコマンドを実行すると、index.htmlが出力されるので、それをgithub pagesなどにアップロードすれば、簡単にホストすることが可能だ。
- 例えば以下のmarkdownを変換すると
% These are sample slides
% chika
# sample
hi hello
## sample2
hi
hey
### sample3
こんな感じ のスライドが生成できる。
reveal.js特有のmarkdownの記法については公式ガイドを参照。シンタックスハイライトを入れたり、画像を挿入したり、HTMLをそのまま書き込んだりすることもできる。
まとめ
- pandocは便利！みんな使おう。