remark.js とは

markdown をスライドに変換する javascript 。シンプル。

web サーバなどたてなくても、ローカルでもスライドが表示できる。なんといっても、html(+remark.js) と markdown を 別々に管理 できるのがよい。

sample.md

# slied 1 
- 1ページ目
---
# slide 2
- 2ページ目

html

<DOCTYPE html>
<html>
<head><title>Presentation</title></head>
<body>
  <script src="http://gnab.github.io/remark/downloads/remark-latest.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    var slideshow = remark.create({sourceUrl: "sample.md"});
  </script>
</body>
</html>

スライドの操作

j 次のスライド(→ ↓ PgDown Space)
k 前のスライド(← ↑ PgUp)
c スライドの clone
f フルスクリーン
p プレゼンモード
h ヘルプの表示

※ Firefox の Vimperator を使っているとキー操作が出来ないので、Shift + Esc なので一時的に無効化する

スライドの clone

スライドを clone すると、元のスライドでページ移動した際、clone 先のスライドも同期して移動する。なので、プレゼンを行う時は

ノートPC で、スライド表示
c で別スライドを立ち上げ、外部ディスプレイ側に移動させた後、f でフルスクリーン化
ノートPC のスライドは、p でプレゼンモードし、スライドを操作

って感じでいける。よく考えられてると思う。

ローカルで動かしてみる

以下は、 MaxOSX でのコンソール操作。

# サンプルをダウンロード
git clone git@github.com:harasou/slides.git

# ブラウザで開く
open slides/sample.html
# ブラウザが Google Chrome の場合
open -a "Google Chrome" --args --allow-file-access-from-files $(pwd)/slides/sample.html

ちなみに、上記サンプルでは、デフォルトで remarkjs.md を開きますが、こんな感じでパラメータにファイル名を渡すと、そのファイルを開くことが出来ます。

file:///<ダウンロードしたディレクトリ>/sample.html?apache_module.md

スライドの作り方

本家のページを見れば、だいたいわかる。

本家
- wiki による説明：https://github.com/gnab/remark/wiki
- remark のサンプル：http://gnab.github.com/remark
- remark のサンプル（ソース）：https://github.com/gnab/remark/blob/gh-pages/index.html
@harasou
- remark.js 使った簡単な説明：http://harasou.github.io/slides/

gh-pages で公開する

静的なページが動けばよいだけなので、gh-pages にアップするのが良さそう。

適当なリポジトリ(ex. harasou/slides)を GitHub に作成し、clone 後、gh-pages ブランチを作成
```
git clone git@github.com:harasou/slides.git
cd slides
git checkout --orphan gh-pages
```
html と markdown 作成し、github にアップ
```
mkdir slides
vim index.html slides/remarkjs.md
git add index.html slides/remarkjs.md
git commit -m "..."
git push origin gh-pages
```
slides ディレクトリ配下の markdown を読み込むように、index.html を記載
gh-pages にアクセス
- http://harasou.github.io/slides/
- http://harasou.github.io/slides/?apache_module.md
gh-pages が表示されない場合は、このあたりを参考に。

markdown + remark.js + gh-pages でプレゼン資料を公開する