reveal.jsのTips

reveal.jsを使用してプレゼンを行うことが多いのですが、これどうやるんだっけ･･･?といって、調べることが多いです。
よく使う設定や書き方をまとめます。

操作編

スライドのOverViewを表示

EscボタンでスライドのOverViewを表示できる

発表モードにする

Sキーで発表者ツール表示。
ノートの書き方は、発表用のnoteを書く(文書内)を参照してください。

PDFで出力

URLの最後に?print-pdfをつけて、Ctrl + pで印刷用の画面が表示される
「レイアウト」の項目を「横」にして、「送信先」を「PDFに保存」にするとPDFで保存される
(Chromeで確認しています)

書き方編

横にスライドを一枚追加する

<div class="slides">の中に、<section>タグを追加することで、スライドを一枚追加できる。

html

<div class="reveal">
    <div class="slides">
        <section>
            // ここにスライドの中身を書いていく
        </section>
    </div>
</div>

縦にスライドを一枚追加する

<section>タグに入れ子で<section>タグを追加することで、縦方向のスライドを1枚追加できる。

html

<div class="reveal">
    <div class="slides">
        <section>
            スライド
            <section>
                縦方向のスライド
            </section>　　　　　　
        </section>
    </div>
</div>

コードブロックを埋め込む

<pre>タグの中に<code>タグを埋め込むことでコードブロックを埋め込むことができる。
また、<code>タグのclass属性に言語を指定することで、その言語に適切なハイライトがされる。

html

<div class="reveal">
    <div class="slides">
        <section>
           <pre>
               <code class="html">
                   // ここにコードを書く
               </code>
           </pre> 　　　　　
        </section>
    </div>
</div>

発表用のnoteを書く

<section>タグ内に<aside class="notes">タグを埋め込むことで、そのスライドに対するノートを作成できます。
発表中にそのノートを見る場合は、発表モードにする(文書内)を参照してください。

CSS編

テーマの変更

html

<link rel="stylesheet" href="css/theme/black.css">

上記の'black.css'の部分を変更することで、テーマを変更できる。
テーマの一覧は以下を参照。
https://github.com/hakimel/reveal.js/#theming