※reveal.js や Pandoc の更新は速く、かつ、大きな変化があったりするので、下記の情報は古くなる可能性があるので、ご注意を。
- 画像や動画を最大化したい場合
- Pandocでmdから変換する際の注意点
- スライドを白いテーマから黒いテーマに変えた時の図の白黒反転
- fragment の順番変更
- 諸々設定
- デモページにあるようにクリック一つでテーマを変える
画像や動画を最大化したい場合
クラスにstretch
r-stretch
を指定。(※どのバージョンからかは分からないが、クラスオプション名が変わった…。)
参照リンク:【翻訳】reveal.js - README.md - Qiita- 参照リンク:Layout | reveal.js
Pandocでmdから変換する際の注意点
mdで見出し1(#)と見出し2(##)を使っている場合、Pandocのオプションに --slide-level=2 をつけておかないと、見出し1(#)直下に本文を入れられない。
スライドを白いテーマから黒いテーマに変えた時の図の白黒反転
$ convert -negate 入力.png 出力.png
または、要バックアップ後
$ mogrify -negate *png
fragment の順番変更
<p class="fragment" data-fragment-index="3">Appears last</p>
<p class="fragment" data-fragment-index="1">Appears first</p>
<p class="fragment" data-fragment-index="2">Appears second</p>
諸々設定
htmlの末尾にある Reveal.initialize({
以下で設定。
Reveal.initialize({
width: 1280,
height: 768,
history:true,
slideNumber: true,
以下、 Reveal.initialize({
以下の設定説明。
画面サイズ
パソコンの画面の解像度に合わせれば、F11を押して全画面表示したときに表示が崩れない。
width: 1280,
height: 768,
現在、デフォルトで960x700。
参照:reveal.jsはどのように要素のサイズを変更しますか?
内容を更新後、スライドhtmlの再読込(Ctrl + R または F5 )後にスライドの最初のページに戻らないようにする
history:true,
デモページにあるようにクリック一つでテーマを変える
htmlのヘッダーのthemeの指定の最後に id="theme" をつける。
<link rel="stylesheet" href="reveal.js/css/theme/simple.css" id="theme">
以下のスライドページを作成。
./reveal.js/css/theme/white.css
などのcssの位置は各自のディレクトリ構成によって適宜編集を。
<section id="themes">
<h1>スライドテーマ選択</h1>
<p>
reveal.js comes with a few themes built in: <br>
<!-- Hacks to swap themes after the page has loaded. Not flexible and only intended for the reveal.js demo deck. -->
<a href="#" onclick="document.getElementById('theme').setAttribute('href','./reveal.js/css/theme/black.css'); return false;">Black</a> -
<a href="#" onclick="document.getElementById('theme').setAttribute('href','./reveal.js/css/theme/white.css'); return false;">White</a> -
<a href="#" onclick="document.getElementById('theme').setAttribute('href','./reveal.js/css/theme/league.css'); return false;">League</a> -
<a href="#" onclick="document.getElementById('theme').setAttribute('href','./reveal.js/css/theme/sky.css'); return false;">Sky</a> -
<a href="#" onclick="document.getElementById('theme').setAttribute('href','./reveal.js/css/theme/beige.css'); return false;">Beige</a> -
<a href="#" onclick="document.getElementById('theme').setAttribute('href','./reveal.js/css/theme/simple.css'); return false;">Simple</a> <br>
<a href="#" onclick="document.getElementById('theme').setAttribute('href','./reveal.js/css/theme/serif.css'); return false;">Serif</a> -
<a href="#" onclick="document.getElementById('theme').setAttribute('href','./reveal.js/css/theme/blood.css'); return false;">Blood</a> -
<a href="#" onclick="document.getElementById('theme').setAttribute('href','./reveal.js/css/theme/night.css'); return false;">Night</a> -
<a href="#" onclick="document.getElementById('theme').setAttribute('href','./reveal.js/css/theme/moon.css'); return false;">Moon</a> -
<a href="#" onclick="document.getElementById('theme').setAttribute('href','./reveal.js/css/theme/solarized.css'); return false;">Solarized</a>
</p>
</section>