読者です 読者をやめる 読者になる 読者になる

亀岡的プログラマ日記

京都のベッドタウン、亀岡よりだらだらとお送りいたします。

Pandocを使ってMarkDownからreveal.js用のスライドを作ってしまおう。

Pandocすげー、という感じになったので、ちょっとメモしておく。

Pandoc

Pandocは皆さんご存知ですかね?とりあえず、以下読んどけばいいと思いますです。

ポイントは

  • Sphinxみたいなテキストデータをいろんな形式に変換してくれるドキュメントエンジン
  • 実装言語はHaskell
  • インプットreSTオンリーのSphinxとは違い、markdownやMediawikiなど様々な形式を取ることができる。reST -> MarkDownとかもできる
  • デフォルトのアウトプット形式もSphinxと比べると豊富

あたりでしょうか。

より詳しくは、以下をご覧ください。あと、インストール方法も。

reveal.js

reveal.jsは、いわゆるプレゼンテーション作成サービスで拡張子から分かるようにHTMLベースのスライド作成ソフトです。Slidyとかs5とかの系統ですね。ただ、いくつかポイントがあります。

  • スライドが横方向だけじゃなくて縦方向にも動けます。これにより、例えば同じトピックで詳細に進む時は下に、トピック移る時は右に、といった具合にスライドを作成することができます。
  • トランジションなどがHTML5フル活用で非常に美しいです。美しすぎてVGAアダプタの相性が悪いと描画遅延するレベルです
  • コードハイライト機能が内蔵されてます。
  • MarkDownをサポートしてます。

詳しくは以下で。

Pandocでreveal.jsをビルドする

さて、Pandocは組込の出力も多彩ですが、テンプレートを指定してそこに読ませることも可能です。
そしてreveal.jsのPandoc用テンプレートも既に公開されています。

要は、

  • revealとテンプレートをダウンロードして
  • ビルドして
  • 結果をrevealのjsやらcssがあるフォルダに置く

これだけですね。シェルで書くなら・・・

git clone https://github.com/hakimel/reveal.js.git
git clone https://gist.github.com/5017084.git pandoc_reveal
mv pandoc_reveal/template-revealjs.html pandoc_reveal/template.revealjs # リネームはお好みで

# ドキュメントのビルド。
pandoc --section-divs -t html5 -s --template pandoc_reveal/template.revealjs  -o reveal.js/out.html  pandoc_reveal/slides.md 

# とりあえずデフォルトブラウザで開く
open reveal.js/out.html 

多分これでMacなら動くんじゃないかな。

ちなみに、サンプルはMarkdownですが、reSTでもちゃんと動いてくれます。素敵素敵。