Jekyllでプレゼンするためにremark.jsを使った話 #Markdown

結論を先に一言で

jekyll + redcarpetの人がremark.jsを使うなら、
assetsとしてmarkdownファイルを用意して、remark.jsが外部ファイルを読み込むように設定しよう

どういうことなのか

普段、技術メモをgithub pagesでjekyllを使ってとっていました

技術メモの内容からLTしようと思ったときに、
markdownで書いたメモの内容をプレゼンテーション形式にできたら楽だと思いました。

markdownからスライドを作るツールとしては、
すでにいくつかあるようで、自分も以下の記事を参考にremark.jsを使うことにしました。

失敗したパターン

remark.jsのREADMEを参考に、jekyll用のテンプレートを作ります。
idがsourceになっているテキストエリアにmarkdownを書くことでプレゼンにしてくれるらしいので
そこにjekyllでとっていたメモを表示するようにしました。

<!DOCTYPE html>
<html>
  <head>
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <style type="text/css">
      @import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
      @import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);
      @import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);

      body { font-family: 'Droid Serif'; }
      h1, h2, h3 {
        font-family: 'Yanone Kaffeesatz';
        font-weight: normal;
      }
      .remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
    </style>
  </head>
  <body>
    <textarea id="source">
    {{ content }}
    </textarea>
    <script src="https://gnab.github.io/remark/downloads/remark-latest.min.js">
    </script>
    <script>
      var slideshow = remark.create();
    </script>
  </body>
</html>

ためしに書いたmarkdownも、READMEの内容そのまんまです。

---
layout: default
title: test
---

class: center, middle

# Title

---

# Agenda

1. Introduction
2. Deep-dive
3. ...

---

# Introduction

水平線がでてきた

jekyll serverして見てみると、1スライドに上で書いたmarkdownが表示されます。
remark.jsではハイフン3つがスライドの区切りのはずなのに、
水平線(hr要素)になっているのはなぜだ？と思っていました。

原因は、jekyllの設定でmarkdownのレンダリングにredcarpetを使うようにしていたため、
redcarpetの拡張文法で、ハイフン3つがhr要素にレンダリングされていたからでした。

うまくいったパターン

解決策としては、markdownがjekyllにレンダリングされなければいいことなので、
プレゼンの内容をassetsフォルダ(画像とかCSSとか置いているフォルダ)に配置しました。

メモの書き方

メモ(_postフォルダに保存するもの)の書き方は以下の通りです。

レイアウト指定
タイトル
プレゼンに変換されるmarkdownのパス

だけ設定して何も書いていません。

---
layout: layout_remark
title: テスト
source: /assets/remark/2015-03-05-test.md
---

2015-03-05-testには、READMEに書いてあるmarkdownを書いておきます。

レイアウトの書き方

次にレイアウトのHTMLを変更します。

<!DOCTYPE html>
<html>
  <head>
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <style type="text/css">
      @import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
      @import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);
      @import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);

      body { font-family: 'Droid Serif'; }
      h1, h2, h3 {
        font-family: 'Yanone Kaffeesatz';
        font-weight: normal;
      }
      .remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
    </style>
  </head>
  <body>
    <script src="https://gnab.github.io/remark/downloads/remark-latest.min.js">
    </script>
    <script>
        var slideshow = remark.create({
            sourceUrl: '{{ page.source }}'
        });
    </script>
  </body>
</html>

大事なのは、以下の部分。
remark.createするときにsourUrlを指定して外部ファイルを読み込むことができるので
メモに書いてあったsourceのパスを読み込んでくれるように書きます。

<script>
    var slideshow = remark.create({
        sourceUrl: '{{ page.source }}'
    });
</script>

これでビルドするとメモの一つがスライドに変換されて
LTとかですぐ発表できるようになります。

すごくLTしたくなってきました。

さいごに

ためしに作ってみたのが以下のプレゼンです。
チェックイン風アプリを5分でつくる