revealjs-markdown



revealjs-markdown

0 0


revealjs-markdown


On Github flatbird / revealjs-markdown

reveal.js で markdown

@flatbirdH

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

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

reveal.js

  • HTML ベーススライド。
  • なんかカッコいいスライドができる。
  • hakimel / reaveal.js から Get !

ちなみにその他の HTML ベーススライド作成ツールキットについてはこちらの記事を参照。

Roundup of HTML-Based Slide Deck Toolkits

特徴

縦方向スライド (Vertical Slides)

下(↓)へ行ける

補足スライドなどに使う

多彩なテーマ

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 アーカイブ

この1,2年で流行ってきてるみたい

サポートしてるシステムも色々

  • GitHub の README.md とか。
  • Tumblr もそうらしい。。。(使ったことないけど)
  • いろんなエディタがあります。
    • Mac 向けが充実してる気がする。
  • 最近では wri.pe なんかがニュースに。。。

本題

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">

…で囲むのが面倒。

1セクションで複数ページの 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!