LoginSignup
399

More than 5 years have passed since last update.

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

Last updated at Posted at 2014-02-10

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
399