Markdownでプレゼンスライド作りたい、Reveal.jsがよさそう

  • 投稿日:
  • by dai-shi

突然ですが、Markdownでプレゼンスライドを作りたいと思いました。LibreOffice Impressを使うのは楽しくありません。最近使い慣れてきたMarkdownでさらっと作りたいです。そう、このブログもMarkdownで書いています。

Markdownで手軽に書く代わりに、見た目はそれなりに見えるものがいい、ということで、最近流行り（？）のHTML/CSSのプレゼンツールを調べてみました。

よさそうだなと思ったのは、

です。

プレゼンをmarkdownで書いたらええやん

にmarkdown2impress.plというのが紹介されています。Markdownを変換してHTMLにするようで、スライドの位置座標の指定にも対応しているようです。

さらに、

markdown2impress.plでついでにpdfも出したらええやん

という別のブログでPDFに出力する拡張が紹介されています。

これでやりたいことがすべてできると思って喜んでいたのですが、Reveal.jsを見たらもっとすごかった。

  • Markdownをそのまま読み込める
  • PDFの出力も標準サポート(Chrome only)

それだけでなく、Perl依存なしになるし、使ってみたところimpress.jsよりReveal.jsの方が動作が軽い気がしました。 impress.jsの方が表現力は豊かだと思いますが、もともとの発想がMarkdownで楽したいというものなのでReveal.jsを使うことにしました。

Reveal.jsを使う時はMarkdownを読み込むためのHTMLが必要です。READMEを読めば分かると思いますが、参考までにサンプルを書いておきます。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>slides</title>
    <link rel="stylesheet" href="css/reveal.min.css">
    <link rel="stylesheet" href="css/theme/default.css" id="theme">
    <script>
        document.write( '<link rel="stylesheet" href="css/print/' + ( window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper' ) + '.css" type="text/css" media="print">' );
      </script>
  </head>
  <body>
    <div class="reveal">
      <div class="slides">
        <section data-markdown="content.md" data-separator="^\n\n\n" data-vertical="^\n\n"></section>
      </div>
    </div>
    <script src="lib/js/head.min.js"></script>
    <script src="js/reveal.min.js"></script>
    <script>
      Reveal.initialize({
        dependencies: [
          { src: 'plugin/markdown/showdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
          { src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
        ]
      });
    </script>
  </body>
</html>

こんな感じでHTMLファイルを作っておいて、あとはcontent.mdを書けばそのままスライド表示されます。気をつけることは改行３つで区切ることくらいです。べんり～。