スライド内容をmarkdownで記述するreveal.js

今までにいくつかreveal.jsを利用したプレゼンテーションスライドの作成について投稿してきました。何回かreveal.jsを使ってプレゼンテーションを作成した結果、以下のようなことを感じています。

スライドの作成をテキストエディタだけでできるのは便利。
細かい位置の調整を数字で設定できるのは快適。
便利で快適なはずなのにいつもスライド作成に時間がかかる。

自分なりになぜかを考えた結果、各スライドごとに同じようなHTMLタグを繰り返し書いていることに気づきました。テキストエディタでショートカットを作ったとしても、ちょっと面倒ですし、何よりテキストがどんどん長くなってしまいます。

markdown記法の利用

上記のような問題の解消策の一つがmarkdown記法の採用です。markdown記法によって多くのHTMLタグの繰り返しをなくすことができます。以下で、やり方を紹介します。
（今回の投稿はreveal.jsの作者であるHakim El Hattabのgithubを参考にしています。また、reveal.jsをmarkdownで記述す方法を紹介した日本語サイトとしてshu223さんのページ
reveal.js で Markdown
があります。あえて、今回の投稿をしたのは、reveal.jsの設定と主なmarkdown記法などの情報を一か所にまとめておくためです。）

reveal.js

initialize(2014/9/17追記)

reveal.jsを利用するために、bodyタグで囲んだ最後の部分でイニシャライズをします。通常、イニシャライズでは、コントロールをナビゲートする三角印を示すかどうかを決めたりします。markdownで記述する場合には、ここでmarked.jsとmarkdown.jsの設定をする必要があります。

以下のコードで設定可能です。ファイルの相対位置に注意して、必要に応じてパスを修正してください。

dependencies: [
{ src: 'reveal.js-2.6.1/plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'reveal.js-2.6.1/plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }
]

section

reveal.jsでは各スライドをsectionタグで囲んでいます。markdownで内容を記述する際にはsectionタグにdata-markdownという属性を与えます。そしてsectionの内側にscriptタグを作ります。markdownを利用したテキストはここに書きます。

<section data-markdown>
    <script>
##ページタイトル
ページ本文
   </script>

</section>

複数のページを一つのscript に書きこむ

上記のやり方で、markdown記法を利用できます。簡単ではありますが、sectionタグを何度も書くのは問題の解消という観点でいまひとつです。少し属性を追加することで、1つのsection内部に複数のページを設定できます。さきほどはsectionタグにdata-markdownという属性を追加しましたが、同じ場所にdata-separatorとdata-verticalという属性を追加します。さらに、それぞれの属性にセパレーターの標識を設定します。

<section data-markdown
         data-separator="^\n\n\n"  
         data-vertical="^\n\n" >
      <script>
##1ページ目のタイトル
1ページ目本文



##2ページ目タイトル
2ページ目本文
     </script>

</section>

markdown記法のまとめ

ここでプレゼンテーション作成に使えそうなmarkdown記法をまとめておきます。

見出し：#の数で決まります。#ならH1,##ならH2,###ならH3です。
斜体と強調：*（斜体の場合）や**（強調の場合）で囲みます。通常のmarkdownはアンダーバーで囲んでも強調されますが、今回の場合はアンダーバーによる強調は使えません。
箇条書き:　- や1．で始めます。
リンク:通常のmarkdownは[Link](http://www.example.jp)のように書きますが、今回の場合は単純にhttp://www.example.jpと書けばリンクになります。
画像：![代替テキスト](パス/ファイル名)のように書きます。
表：ハイフンとパイプを使います。ハイフンは、行間の罫線、パイプは列間の罫線です。

jnobuyukiのブログ

研究していて困ったことやその解決に関するメモ。同じように困ったあなたのために。twitter ID: @j_nobuyuki