notebook

都内でWEB系エンジニアやってます。

markdownでプレゼン

markdownでプレゼン

Cleaverを使ってみる

Cleaverとは

markdownファイルを使ってプレゼン資料にするためのツール

インストール

コマンド一発でインストール可能

npm instlal cleaver
  • node.js npm が必要

スライド作成

通常のmarkdownと違うところ

  • 最初にスライドの情報を記述する
  • ページの区切りは -- で行う
 title: Example
 author:
   name: swfz
 output: output.html
 controls: true
 style: style.css
 --
#1ページ目
 --
#2ページ目

markdown記法で内容を記述します

test.md

# cleaver h1
## h2
### h3

* item
    * indented item

スライド作成

htmlファイルに変換します

先頭で記述したoutput: filename にファイルを出力

出力したhtmlファイルをブラウザで開くだけでOK

カーソルやjklhでスライド送りができます

watch オプションで自動的に反映

生成

cleaver test.md

自動反映

cleaver watch test.md

画像

markdown記法で画像も貼り付けられます。

![sample_image](sample_cleaver.PNG "sample")

デザイン

theme

設定するとgithubのthemeを読み込める

style.cssを自動的に読み込んでくれるみたい

簡単にデザインを変更できます

theme: jdan/cleaver-retro

style

cssを指定することでデザインをカスタマイズできます

style: style.css

デザイン

スライドごとのデザイン

スライドごとの区切りの後にクラス名を記述

 -- bg
.bg {
  background: url(bg_darts.png);
}

おわり

  • 簡単に資料が作れる
  • themeでデザインテンプレートを選べる
  • 自分でカスタマイズできる
  • ある程度仕様に合わせないといけない所もある

プレゼンする機会が今のところ無いので次あったら使ってみようかと思っています

とりあえずサンプル作ったのでそのときのthemeをあげて置きます

swfz/cleaver-theme