Edited at

Reveal.js、Markdown、Githubでスライドを作成する。

More than 1 year has passed since last update.

PowerPoint2003から2013になってちょっと戸惑いを隠せない。。。

ありきたりなスライドテンプレートもなんか嫌だし。。。

と思っていたところ、markdownでWebスライドが作れることを発見しました。

GithubでWebページを公開する方法を発見、SublimeTextも入れたので、ちょっとWebスライドを作ってみます。

完成サンプル

http://budougumi0617.github.io/reveal.js-myMaster/

slide.png


作り方

Reveal.jsというJavaScriptライブラリを利用します。


  • GitHubからreveal.jsのプロジェクトzipをGET

  • index.htmlをテキストエディタで開く。


  • <div class="slides">タグ内の<section>内容を削除

  • 後述のオプション付き<section>を記載する


  • <section>内にMarkdownでゴリゴリ書く

これだけ!!



Markdown用のsection定義。

以下の<section>定義でmarkdownを使用してスライドが書けます。

もちろん、通常の<section>定義でHTMLを利用してスライドを作成することも可能です。

---を入れることで右に次のページを作成。

--を入れることで下に次のページを作成。

<section data-markdown

data-separator="\n---\n$"
data-vertical="\n--\n">
<script type="text/template">
ここにmarkdownを記載していく。
</script>
</section>

たとえコードタグ内でも、markdown記載中に</script>がでるとバグる点だけ気をつけてください。

Markdown記述部分を別ファイルにしておけばindex.htmlは使いまわすことも可能です。

<section data-markdown="./md/firstpage.md"

data-separator="\n---\n$"
data-vertical="\n--\n">
<script type="text/template">
</script>
</section>



編集後はGithubで公開

あとはGithubで新規のリポジトリ作成。

clone,init後にzipの中身を全てコピーして、gh-pagesブランチにpushすればGithub上にスライドが公開できます。

#今回コミットはSourceTreeで行なったので、コマンドログは割愛。



その他

<iframe>で埋め込みしたいときなどはおとなしくHTML使う必要があります。

その他Reveal.jsの詳細な使い方はGitHubのREADME.mdを参照してください。

ちなみにブラウザでスライド確認中は、escoでスライドを一覧表示にできるのですが、

ViChrome使っていると競合して動かないので注意。

Ctrl + escでViChromeをエマージェンシーモードにしてからoで一覧表示ができます。



参考

今回は以下の情報を参考にさせていただきました!

本家のデモ

http://lab.hakim.se/reveal-js/#/

なんかかっこいいプレゼンテーションテンプレートを探しているならreveal.js使ってみろって

http://qiita.com/ryurock/items/9c6de36b9d6a716e7992

reveal.js+Markdown

http://qiita.com/siguremon/items/c717eca388070215712c

reveal.jsで格好いいプレゼンを作ってみた

http://d.hatena.ne.jp/zebevogue/20121110/1352521622