reveal.js で markdown

@flatbirdH

このスライドの作り方のお話です。

reveal.js も markdown も知ってるなら Jump!

多彩なテーマ

Sky - Beige - Simple - Serif - Night - Default

かっこいいページめくり

Cube - Page - Concave - Zoom - Linear - Fade - None - Default

スライド操作

• ESC でスライド一覧。
• Alt + マウスクリックでズーム。
• ピリオド <.> でスライドをブラックアウト。
• 方向キーだけでなく、J, K, H, L キーでも上下左右のスライドに移動できる。
  • Vim 使いながら触ってたら気付いた...

コード装飾 (code prettifier)

#include <stdio.h>

int main(int argc, char* argv[]) {
    printf("Hello, world!\n");
    return 0;
}

プログラマが個人でスライド作るには

本当に便利

• ブラウザだけでプレゼン可能。
  • PowerPoint とか要らない!
  • マルチプラットフォーム (Mac, Win, Linux...)
• テキストベースでバージョン管理。
• GitHub Pages とかで公開可能。(静的 HTML)

でも HTML 書くの面倒・・・

ε＝（‐ω‐；；）

そこで Markdown !

reveal.js は Markdown をサポート

Markdown

Markdown

• 軽量マークアップ記法。
• Markup の反対で Markdown。(たぶん)
• 読みやすいプレーンテキストで書いて HTML に変換出来る。

例えばこれが

	
	### Markdown サンプル

	1. リスト
	  - *斜体*
	  - **強調**

	2. [リンク](http://ladygeekgirl.wordpress.com/2012/06/18/why-i-hate-toon-link/)

	3. ![画像](image/baby.png)

	

こうなる

Markdown サンプル

リスト

• 斜体
• 強調

リンク

けっこう昔(2004年)からあったらしい

本家解説サイトの Web アーカイブ

この１,２年で流行ってきてるみたい

本題

reveal.js で markdown

• 各ページの <section> タグに data-markdown 属性をつける。
• さらに、<script type="text/template"> で囲む。

<div class="slides">
  <section data-markdown>
    <script type="text/template">
    ### Markdown
    1. One
    2. Two
    3. Three
    </script>
  </section>
</div>

でも、このままだとページごとに

<section data-markdown>

<script type="text/template">

…で囲むのが面倒。

１セクションで複数ページの Markdown を書く方法

• "data-separator" でページセパレータを正規表現で指定
  • ここでは空行に続く "---" をセパレータに使用。
• "data-vertical" で縦方向のページセパレータを正規表現で指定。
  • ここでは空行に続く ">>>" を使用。

<div class="slides">
  <section data-markdown data-separator="^\n---$" data-vertical="^\n>>>$">
    <script type="text/template">
      Page 1
      
      ---
      Page 2
      
      >>>
      Page 2.2

    </script>
  </section>
</div>

まとめ

• Pros
  • PowerPoint 要らない！
  • HTML/CSS/JS 書けると色々拡張できる。可能性は ∞ !
  • スライド作ってるんだけどコード書いてるみたいで楽しい。
• Cons
  • ある程度 HTML コーディングによる調整が必要。
    • デバッグが必要になる場合も。。。
    • 色々いじってると PowerPoint よりスライド作成に時間が掛かってる気がする。
  • 画像や図や表を使うなら PowerPoint のほうが全然楽。
    • スマートアートとかアニメーションも。。。
  • オフラインでは使えない？
    • Google Web Fonts を落としてきてるみたい。
  • IE8 以前では見られないかも。

Thank you!