A small introduction to picture show

@tototoshi

Agenda

Picture Show ってなに

  • Markdown からスライドを作っちゃう素敵ツール
  • scala で書かれてます

Why Picture Show ?

Slideshows should be relatively portable and should not require proprietary formats to run. Slideshow presentations should be as simple as possible for an audience to understand. Software should be the same way.

ここが便利 その1

Markdown で書ける

ここが便利 その2

最低限ファイル2つ(conf.js, *.md)でOK

ここが便利 その3

デフォルトでそこそこカッコイイ

ここが便利 その4

シンタックスハイライトしてくれる！ 

object HelloWorld {
  def main(args: Array[String]): Unit = {
    println("Hello, World!")
  }
}

ここが便利 その5

画像貼るのも簡単

icon

ここが便利 その6

レイアウトもしやすい 


<center>
  <span class="pink">scalaちゃんかわいい</span>
</center>


scalaちゃんかわいい

インストール

必要なもの

手順1

 $ git clone git://github.com/softprops/picture-show.git
 $ cd picture-show
 $ sbt publish-local

手順2

 $ cs softprops/picture-show

以上！

使い方

何を用意すれば良いの？

  • conf.js
  • .md

conf.js

{
  "title": "some show title"
  "sections": [
    "sectiona",
    "sectionb"
  ]
}

*.md

markdown

ファイル配置

picture-show-introduction
├── conf.js
├── css
│   └── custom.css
└── intro
    ├── intro.md
    └── scalachan.png

Customize!

  • css/custom.css
  • js/custom.js

仕上げ


 $ pshow

http://localhost:3000 で確認 


 $ pshow --offline -o=/path/to/output

でexport





完成

まとめ





Picture Showでスライドばんばん作って発表しましょう

参考





ご清聴ありがとうございました。