remark.js とは
ref: https://github.com/gnab/remark
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次のスライド(→↓PgDownSpace) -
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-pagesslides ディレクトリ配下の markdown を読み込むように、index.html を記載
-
gh-pages にアクセス
gh-pages が表示されない場合は、このあたりを参考に。