Help us understand the problem. What is going on with this article?

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

More than 3 years have 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

budougumi0617
業務ではGo/Ruby。以前はC/C++/C#。 最近はgithub.ioに書いてます。
https://budougumi0617.github.io/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした