nDiki

Markdown でプレゼンテーションスライドを書ける reveal.js と remark のどちらが良いか

Markdown ファイル読み込んでプレテンテーションスライド Web ページにする reveal.js と remark を試してみたところ Markdown ファイルの再利用の点で reval.js の方がイケていた。

以前プレゼンテーションスライドを Markdown で書いて pandoc で reveal.js なページを生成する方法を使っていた。この方法だと1つの Markdown ファイルからスライドページと普通の HTML5 ファイルを生成できるという点が便利だった。

ただデメリットとして「作成環境で pandoc を用意しなければならないので、環境移行した時などにスライドを作る腰が重くなってしまう」というのと、「原稿を修正するたびに pandoc (make) して生成しなおして確認する必要がある」というのがあってちょっと面倒でもあった。

今は自前で Markdown ビューアを立てているということもあり、某環境では HTML5 ファイルは生成しなくても良いので、スライドページの方も Markdown ファイルを外部ソースファイルとして直接読み込む形の方が気楽かなと。

ちょうどこの間の PerlCasual #06 で @Niratama 氏が Remark というスライドショーツールを 使っていて興味が沸いたのでこのタイミングで試してみた。

reveal.js はちょっとグリグリ動くこともあって結構負荷が高い印象だったのに対して、こちらの方が軽い。また reveal.js はテーマファイルなどを読み込むので一通りパッケージディレクトリを一緒にどこかに置いておかなければならないんだけれど remark は JavaScript ファイルだけで良さそうというのも簡潔で良い。

ただ一方で Markdown ファイルで追加でプロパティを書く必要があったりして、 Markdown ファイルの再利用性はちょっと低い感じ。結局そのスライド専用の原稿ファイルにする必要がある。

一方で reveal.js だと Markdown ファイルに追加の記述をしなくてもそれなりに形になるので自分にとっては reveal.js の方が便利そう。

ということで引き続き reveal.js を使うことにした。

個人的な好みで reveal.js 2.6.2 に対して以下を style に追加してみた。これでちょっと日本語スライドが見やすくなるかな?

 .reveal .slides { text-align: left; }
 .reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {
    text-transform: none;
    text-shadow: none;
  }
  .reveal h1 { font-size: 3.00em; }
  .reveal h2 { font-size: 2.00em; }
  .reveal h3 { font-size: 1.50em; }
  .reveal h4 { font-size: 1.00em; }