dackdive's blog

新米webエンジニアによる技術ブログ。JavaScript(React), Salesforce, Python など

reveal.jsで外部Markdownファイルを読み込む

いつも忘れるのでメモ。
index.html 内に直接書くのではなく、別途用意した Markdown ファイルをスライドにしたい。

body に以下のように記述する。

<body>
    <div class="reveal">
      <div class="slides">
        <section data-markdown="./index.md"
                 data-separator="^\n\n\n"
                 data-separator-vertical="^\n--\n"
                 data-separator-notes="^Note:">
        </section>
      </div>
    </div>
    ...
</body>

こうすればスライドの内容は index.md というファイルに書くことができる。

ページの区切りは data-separator で指定することができて、上の例では改行 3 つ分としている。
--- にすると MarkdownGitHub で見たときに区切り線でいっぱいになるので避けた。

また、このように外部ファイルを読み込む場合はそのまま index.html を開いてもだめで
ローカルサーバーを起動する必要がある。

f:id:dackdive:20160629210349p:plain

Failed to get the Markdown file ./index.md. Make sure
that the presentation and the file are served by a HTTP server
and the file can be found there. NetworkError: Failed to
execute 'send' on 'XMLHttpRequest': Failed to load 'file:///
Users/yamazaki/workspace/reveal.js-template/index.md'.

どんな方法でサーバーを起動してもいいんだけど、面倒なのとその他の設定もよく忘れてしまうのでテンプレートを作った。

Node の http-server を使っている。