Reveal.js を使って Markdown ファイルでスライドを作ってみる

Reveal.js というライブラリを使って、Markdown ファイルでスライド資料を作ってみる。

今回は機能を深くは掘り下げず、お試し環境を構築してみるところまで。

まずは Reveal.js の Git リポジトリを Clone し、必要なパッケージをインストールする。

$ git clone https://github.com/hakimel/reveal.js.git
$ cd reveal.js/
$ npm install

この時点で $ npm start してみると、index.html に記載の、「Slide 1」「Slide 2」という簡単なスライドがブラウザで表示される。

次に、Markdown でスライドを作れるようにする。index.html を開き、

<div class="reveal">
  <div class="slides">
    <section>Slide 1</section>
    <section>Slide 2</section>
  </div>
</div>

この部分を以下のように直す。

<div class="reveal">
  <div class="slides">
    <section data-markdown="index.md" data-separator="^\n-----\n$" data-separator-vertical="^\n>>>>>\n$"></section>
  </div>
</div>

そしたら、以下のような index.md を作成する。

# Slide 1

## 見出し2

### 見出し3

#### 見出し4

##### 見出し5

###### 見出し6

<!-- 「-----」で次のページに移動する -->

-----

# Slide 2

2ページ目。

_アンダースコア斜体_、*アスタリスク斜体*。  
__アンダースコア太字__、**アスタリスク太字**。  

`span` 要素で<span style="color: #f00;">赤色に</span>。

-----

# Slide 3-1

<!-- リストの種類に関わらず2スペースでネストできる -->
- リスト
  - ネスト
    - さらにネスト
  - ネスト
    1. 番号付き
    2. 番号付き
      1. 番号ネスト
  - ネスト
- リスト

<!-- 「>>>>>」で下に移動する -->

>>>>>

# Slide 3-2

| Heading 1 | Heading 2 | Heading 3 |
|:----------|:---------:|----------:|
| Data 1-1  | Data 1-2  | Data 1-3  |
| Data 2-1  | Data 2-2  | Data 2-3  |
| Data 3-1  | Data 3-2  | Data 3-3  |

-----

# Slide 4

<!-- ↓実際は「｀」を半角の「`」に直す -->

｀｀｀html
<DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>Reveal.js Example</title>
  </head>
  <body>
    <script src="reveal.js"></script>
  </body>
</html>
｀｀｀

作成したら、

$ npm start

で実行。http://localhost:8000/ が起動し、Markdown ファイルがパースされてスライドになっているはずだ。

index.html に記載した index.md 部分を別の Markdown ファイルに書き換えれば、この reveal.js ディレクトリはスライドの動作環境として使い回しが利く。

馴染みの Markdown ファイルで、簡単にスライドが作れるので、オススメ。