Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

remark.js とは

ref: https://github.com/gnab/remark

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 先のスライドも同期して移動する。なので、プレゼンを行う時は

  1. ノートPC で、スライド表示
  2. c で別スライドを立ち上げ、外部ディスプレイ側に移動させた後、f でフルスクリーン化
  3. ノート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

screenshot-harasou github io 2014-09-11 14-17-24.png

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

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

スライドの作り方

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

gh-pages で公開する

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

  1. 適当なリポジトリ(ex. harasou/slides)を GitHub に作成し、clone 後、gh-pages ブランチを作成

    git clone git@github.com:harasou/slides.git
    cd slides
    git checkout --orphan gh-pages
    
  2. 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 を記載

  3. gh-pages にアクセス

    gh-pages が表示されない場合は、このあたりを参考に。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした