markdown使用時のreveal.jsでよく使う記法集

## テンプレートのmarkdown
```html
---

# 一番大きな見出しはこんな感じ
~ ふつうのもじ ~

---

## 二番目に大きな見出し


---

### 三番目に大きな見出し

<aside class="notes">
　　（発表者用原稿）
    スピーカーノートウィンドウを's'で表示
    スライドには表示されないないが、
    スピーカーウィンドウ上に表示
</aside>

Note:
　　（発表者用原稿）
    スピーカーノートウィンドウを's'で表示
    スライドには表示されないないが、
    スピーカーウィンドウ上に表示

>>>

">"が三つで下スライド作れる

>>>

#### 画像の埋め込み

  <img src="images/cafe.jpg" alt="カフェの写真" style="width: 60%; border-radius: 1em;">

---

#### 動画の埋め込み

基本

  <video width="800" height="450" controls autoplay muted>
    <source src="videos/vlog.mp4" type="video/mp4">
    お使いのブラウザは video タグをサポートしていません。
  </video>

autoplay + mutedを追加
  <iframe width="800" height="450"
    src="https://www.youtube.com/embed/動画ID?autoplay=1&mute=1"
    frameborder="0"
    allow="autoplay; encrypted-media"
    allowfullscreen>
  </iframe>

---

### オートアニメイト

<section data-auto-animate>
1 ---
</section>

<section data-auto-animate>
1 --- <br>
2 ---
</section>

<section data-auto-animate>
1 --- <br>
2 --- <br>
3 ---
</section>

---

### アニメーション

<ul>
  <li class="fragment">1つ目のポイント</li>
  <li class="fragment">2つ目のポイント</li>
  <li class="fragment">3つ目のポイント</li>
</ul>

- 1つ目のポイント <!-- .element: class="fragment" -->
- 2つ目のポイント <!-- .element: class="fragment" -->

---

### 文字スタイル
文字のスタイル普通<br>
<span style="font-size: 80%; color: white;">
文字サイズの変更
</span>

>>>

### コードはこんな感じ
\```
const users = User.findAll();
for (const user in users) {
  const friends = user.findFriend();
  // ...
}
\```

---

<p style="text-align: right">右寄せ</p>
<p style="text-align: right"><span style="font-size: 70%; color: white;">右寄せ＋文字スタイル変更</span></p>


---

## コードハイライト

\```text [1|2]
1 ------
2 ------
\```
```

## 改ページ
-を３つで改ページ
\---



## 下ページ
\>を3つで下に改ページ
\>>>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2738475/e2bae2f9-2ee9-4ae8-117f-0a06e2f21658.png)


## AutoAnimate
スライドの変化前と変化後の状態を指定するとreveal.jsがアニメーションを付けてくれる
```html
<section data-auto-animate>
1 ---
</section>

<section data-auto-animate>
1 --- <br>
2 ---
</section>

<section data-auto-animate>
1 --- <br>
2 --- <br>
3 ---
</section>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2738475/8e74fb47-27e0-7d1c-7c65-a289f17c90ad.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2738475/2bab7734-5f8e-b1a8-d19b-fbc55e6d5ca3.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2738475/53b09f22-69c7-5b54-694f-6cd018c4e5a4.png)



## コードスニペット
コードを綺麗に見せる事が出来る
\```で囲む

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2738475/d7eb3814-aeb6-79b9-752f-4c4d03533eba.png)


## コードハイライト
コードの特定の場所を強調する事が出来る

\```text[1|2-3|4,6]
\```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2738475/a07b044a-cbea-67b9-c3be-2516cad45aa4.png)


## 文字サイズの変更
\<span style="font-size: 80%; color: white;">
\</span>


## 文字寄せ
\<p style="text-align: right">
\</p>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2738475/ca2d096f-31f2-9314-26b0-0e21ccfc07f1.png)


## フラグメントへの効果

```
-  フェードイン<!-- .element: class="fragment fade-in" -->
```

| クラス                      | 効果      |
| ------------------------ | ------- |
| `fade-in`                | フェードイン  |
| `fade-out`               | フェードアウト |
| `grow`                   | 拡大表示    |
| `shrink`                 | 縮小表示    |
| `highlight-current-blue` | 青色強調    |


## 番号付きリスト

```
1. 25卒はどう？ <!-- .element: class="fragment" -->
2. おやすみの日は何してる？ <!-- .element: class="fragment" -->
3. ゴーストモード <!-- .element: class="fragment" -->
```