Reveal.js + Markdownで簡単にプレゼン資料を用意する
プレゼン資料を用意するの毎回時間かかるし結構めんどくさいなー。って思ってたらReveal.jsなるものを見つけたので、早速使ってみました。 少し前に流行ってた？みたい。
導入
本家のgithubが丁寧に書かれているのでそれに従ってセットアップ。外部からMarkdownファイルを読み込めるようにしたいため、Node + Grantのフルセットアップを行います。
git clone https://github.com/hakimel/reveal.js.git cd reveal.js npm install
grunt serveでhttp://localhost:8000にアクセスするとスライドが見れます
Markdownの埋め込み
bodyのdiv class="reveal"内で以下のように記述することで、md/test.mdを読み込んでくれます。
<body> <div class="reveal"> <!--ここから！ --> <!-- Any section element inside of this container is displayed as a slide --> <div class="slides"> <section data-markdown="md/test.md" data-separator="---$" data-separator-vertical=">>>$" data-transition="zoom"> <script type="text/template"> </script> </section> </div> <!--ここまで！ --> </div>
test.mdは以下
# これはReveal.jsのテストです
Hello, reveal.js!
---
## Reveal.js& Markdownで
## スライド作り
***
* Markdownでスライドを作ります
* index.htmlにファイル名を指定して埋め込みます
* たのしい✌('ω'✌ )三✌('ω')✌三( ✌'ω')✌
>>>
## ここは補足ページなどになります
---
## 利点
* とにかくMarkdownがラク
* Markdown大好きマンには嬉しい
* 動きがかっこいい
---
## あなたもRevealjs + Markdownでプレゼン作成のストレスを軽減しよう！
テーマの変更
メタタグのthemeを変更することでスライドのテーマを変更できます。
<link rel="stylesheet" href="css/theme/serif.css" id="theme">
各種設定
sectionタグのdata-transitionを変えることでスライドの遷移方法を変えることができます。
<section data-markdown="md/test.md"
data-separator="---$"
data-separator-vertical=">>>$"
data-transition="zoom">
data-separator ページ送りを正規表現で表します。上記例だと
---改行でページ送りができます。data-separator-vertical 縦方向のページ送りの正規表現を指定します。
data-transition ページ遷移のアクションを指定します。
