adbird（広告鳥） 備忘録

reveal.js pandoc 関連の覚書

reveal.js pandoc

※reveal.js や Pandoc の更新は速く、かつ、大きな変化があったりするので、下記の情報は古くなる可能性があるので、ご注意を。

画像や動画を最大化したい場合

クラスにstretch r-stretch を指定。（※どのバージョンからかは分からないが、クラスオプション名が変わった…。）

pandocでmarkdownからreveal.jsに変換する場合、

![](./pic/test.jpg){.center .r-stretch}<p></p>

と、<p></p>をつけておかないと、大きな画像はスライドからはみ出てしまう。

Pandocでmdから変換する際の注意点

mdで見出し1（#）と見出し2（##）を使っている場合、Pandocのオプションに --slide-level=2 をつけておかないと、見出し1（#）直下に本文を入れられない。

div要素にclassをつける（pandoc）

:::{.test}
テキスト
:::

スライドを白いテーマから黒いテーマに変えた時の図の白黒反転

imagemagick

$ 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>

参照：Fragments | reveal.js

諸々設定

htmlの末尾にある Reveal.initialize({ 以下で設定。

Reveal.initialize({
margin: 0.03,
width: 1024, 
height: 768, 
history:true,
hash: true,
slideNumber: true,
slideNumber: 'c',

以下、 Reveal.initialize({ 以下の設定説明。

余白

margin: 0.03,

デフォルトは0.04

画面サイズ

width: 1024, 
height: 768,

デフォルトは960x700。

参照：Presentation Size | reveal.js

プロジェクターの解像度には以下を参照。（プロジェクター 解像度 | 知っておきたいプロジェクターの基礎知識 | CASIO）

ビジネス用のプロジェクターの解像度には、下記のような規格が採用されている場合が多いでしょう。

VGA　解像度：640×480
SVGA　解像度：800×600
XGA　解像度：1024×768
WXGA　解像度：1280×800
フルHD 解像度：1920×1080
WUXGA 解像度：1920×1200

「数字×数字」であらわされている解像度は、ドットの細かさ以外に、スクリーンのヨコとタテの比率もあらわしています。たとえばXGAの「1024×768」は「4：3」のスクリーン比率で、WXGAの「1280×800」はよりワイドな「16：10」のスクリーン比率であることがわかります。

現行のビジネス用プロジェクターではXGAやWXGAを採用している機種が多いようですが、古いプロジェクターの場合、VGAやSVGAを使っている機種もあるでしょう。

内容を更新後、スライドhtmlの再読込（Ctrl + R または F5 ）後にスライドの最初のページに戻らないようにする

history:true,
hash: true,

スライドのページ番号

slideNumber: true,

通し番号にしたい場合、

slideNumber: 'c',

も追加する。

デモページにあるようにクリック一つでテーマを変える

htmlのヘッダーのthemeの指定の最後に id="theme" をつける。

<link rel="stylesheet" href="reveal.js/css/theme/simple.css" id="theme">

以下のスライドページを作成。

./reveal.js/css/theme/white.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>

スライドをPDF化

以下を参照のこと。