すごいスライド作成ツールSlidevのマークダウンの書き方

# Slidevとは？

Slidevとは何かについては以下等読んでいただければと思います。
[開発者のためのスライド作成ツール Slidev がすごい](https://zenn.dev/ryo_kawamata/articles/introduce-slidev)
簡単にいうとマークダウンから発表用スライドを作成するすごいツールです。
元から録画機能がついていたり、画面右下にカメラの映像を流せたり、すごいことがいっぱいなのですが、
本記事では[Slidevガイド](https://sli.dev/guide/)を元にどのようにマークダウンを書けば良いのかを紹介したいと思います。  
もっと詳細を見たい方は[Slidevガイド](https://sli.dev/guide/)を見てください。
※本記事作成時点ではガイド工事中のため一部記載不足があるようです。

# Slidev 初期セットアップ

Slidev を実行する際は以下を実行するだけで環境は整います。

```
npm init slidev
```

実行するとディレクトリ名などを問われるので入力し少しするとブラウザが立ち上がり
サンプルスライドが表示されます。

# マークダウンの基本的な書き方

Slidev は単一のマークダウンファイル（デフォルトではslidev.md）にて書き込まれます。
以下使い方をご紹介します。

## ページ区切り

`---`を使うことでページを区切ることができます

```md
# ページ 1

---　 ← ページ区切り

# ページ 2
```

## レイアウト設定

ページ区切りを frontmatter にすることで各ページのレイアウトやメタデータを定義することができます

```md
# Page1

---
layout: image-right
image: https://wired.jp/app/uploads/2018/01/GettyImages-522585140_w1920.webp
---

# Page2
```

frontmatterに記載する詳細は後述の[カスタマイズ定義](#カスタマイズ設定)を参照してください

## コードブロック

markdownのコードブロックと同じように記述できます

    ```ts
    function add(
      a: Ref<number> | number,
      b: Ref<number> | number
    ) {
      return computed(() => unref(a) + unref(b))
    }
    ```

![2021-05-19-19-53-13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513231/dc83add4-16a7-bb64-be15-d671ea8c3922.png)



### 行の強調表示

かっこ内に強調したい行番号を追加することでできます

    ```ts{2,3,5}
    function add(
      a: Ref<number> | number,
      b: Ref<number> | number
    ) {
      return computed(() => unref(a) + unref(b))
    }
    ```

![2021-05-19-19-53-43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513231/afa5e299-466d-de5a-1425-ac2fe36b82c8.png)


### 順番にハイライトさせる

「|」で区切ることで順番にハイライトさせたい行を指定することができます。

    ```ts {2-3|5|all}
    function add(
      a: Ref<number> | number,
      b: Ref<number> | number
    ) {
      return computed(() => unref(a) + unref(b))
    }
    ```

![step.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513231/89aeed1f-15ff-9a9c-a048-652216d57534.gif)

### 発表中に編集可能なコードブロックを作成する

コードブロックの言語IDの後に{monaco}を追加するだけでOKです。

    ```ts {monaco}
    function add(
      a: Ref<number> | number,
      b: Ref<number> | number
    ) {
      return computed(() => unref(a) + unref(b))
    }
    ```

![monaco.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513231/afc4ecdc-ca03-120c-c38c-7b21d65f6d51.gif)

## ページ単位のスタイル設定

markdown内に直接styleタグを記述することで
``現在のスライドの``スタイルを変更できます。  
※当然次のスライドには影響がありません。

    # 赤色タイトルのページ
    
    <style>
    h1 {
      color: red
    }
    </style>
    
    ---
    
    # 次のページには影響がない

![2021-05-19-20-14-57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513231/adcfc73a-dd9c-40b0-5692-cb411007c29b.png)


## ノート機能

スライドごとのノート機能も搭載してます。

    # Page 1
    
    This is the cover page.
    
    <!-- コメントブロックに書くとノートになります -->

![2021-05-19-20-20-17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513231/4a2994ba-45b2-df34-06a4-2120303dcf30.png)


## アイコン

[Iconify](https://iconify.design/)にしたがって{collection-name}-{icon-name}でアイコンを表示することができます

![2021-05-19-20-43-12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513231/860b07c3-2e92-8254-224a-979bb8f1789f.png)


## スタイリングアイコン

以下のように書くと様々なアイコンを利用できます

```md
<uim-rocket />
<uim-rocket class="text-3xl text-red-400 mx-2" />
<uim-rocket class="text-3xl text-orange-400 animate-ping" />
```

![styleingIcon.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513231/3792c3d9-11d8-5995-4ad2-4da584217f10.gif)


## ダイアグラム

[Mermaid](https://mermaid-js.github.io/mermaid/#/)を使って図・グラフを生成することもできます

    ```mermaid
    sequenceDiagram
      Alice->John: Hello John, how are you?
      Note over Alice,John: A typical interaction
    ```

![2021-05-19-20-51-45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513231/1937b0eb-6a1c-9048-7bb8-bfda930927f6.png)

# グリッド

[Windi CSS](https://windicss.org/)が内蔵されているため
グリッドレイアウトを利用できます。
以下例では一番外側のclassに``grid grid-cols-2 gap-4``と記載することで
2列のグリッド（grid-cols-2）かつそれぞれの幅を4の大きさで作成しています。
Windi CSSのGridの詳細は[こちら](https://windicss.org/utilities/grid.html)参照してください

    <div class="grid grid-cols-2 gap-4">
    <div>
    1 番目のカラム
    
    ```javascript
    function() {
      document.addEventListener('click', {
        console.log();
      });
    }
    ```
    
    </div>
    <div>
    2番目のカラム
    
    ```javascript
    function() {
      document.addEventListener('click', {
        console.log();
      });
    }
    ```
    
    </div>
    <div>
    3番目のカラム
    </div>
    <div>
    4番目のカラム
    </div>
    </div>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513231/c5e3a537-b8a7-c1e7-011d-88fcda3d3e40.png)


# ナビゲーション

発表中画面下部にマウスを持っていくと表示されるナビゲーションです。
[公式ガイド](https://sli.dev/guide/navigation.html#navigation-bar)を参照してください。

以下本記事執筆時点の日本語訳画面キャプチャです

![2021-05-19-20-55-39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513231/a405888b-d753-c05c-79a0-c882e49d1df9.png)

# アニメーション

## v-clickを使ったアニメーション

```md
<!-- 次のページへ進むと最初に表示される内容 -->
<v-click>
Hello World
</v-click>

<!-- さらに次のページへ進むと表示される内容 -->
<div v-click class="text-xl p-2">
Hey!
</div>
```

![v-click.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513231/30365cf9-0a3d-c1bb-af3e-7972b20aad1a.gif)


## v-afterを使ったアニメーション

v-afterを使うことで1つ前のv-clickと同じタイミングで表示させることができます

```md
<div v-click>Hello1</div>
<div v-click>Hello2</div>
<div v-after>World</div>
```

![v-after.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513231/a14f467a-da60-4c5b-035d-4c1e08ab700d.gif)

## v-clicks

v-clicksで囲むことで1つ1つv-clickを指定することを省略することができます。リストなどでより真価を発揮することでしょう。

```md
<v-clicks>

- Item 1
- Item 2
- Item 3
- Item 4

</v-clicks>
```

![v-clicks.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513231/114ebfbb-41bc-0e07-0722-fbb805ae298b.gif)


# テーマを使用する

[レイアウト設定](#レイアウト設定)で説明したfrontmatterで

    ```
    theme: seriph
    ```

とすることでテーマを指定・使用することができます。

## テーマを変更する

[テーマギャラリー](https://sli.dev/themes/gallery.html)からテーマを追加することができます。

![2021-05-19-21-06-51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513231/5851394d-bbb3-cfb1-359e-c12fa52d5981.png)

このページにあるテーマ名を指定すると(以下例ではFlayyer)

    ```
    theme: Flayyer
    ```

コンソールに以下のような文言が出てきます

```
? The theme "slidev-theme-Flayyer" was not found in your project, do you want to install it now? » (Y/n)
```

ここでYesとすると指定したテーマがダウンロードされ、利用できるようになります。

# カスタマイズ設定

|設定値|説明|
|---|---|
|theme|テーマ|
|title|HTML titleの設定|
|colorSchema|dark/light もしくはautoを選択できる。darkならダークモードになる。指定した場合ナビゲーションバーから変更不可|
|background|背景画像指定|

そのほか詳細な設定については以下参照してください

- [公式ガイドカスタマイズ](https://sli.dev/custom/)
- [SlidevConfig](https://github.com/slidevjs/slidev/blob/main/packages/types/src/types.ts#L16)

# コンポーネント

[公式ガイドコンポーネントページ](https://sli.dev/builtin/components.html)が工事中のため、わかる範囲で記載しております

## 配置方法

プロジェクトルート直下のcomponentsディレクトリにコンポーネントを配置すると、そのコンポーネント名で利用可能になります

## デフォルトコンポーネント

### Counter

本記事作成時点ではCounterのみがコンポーネントとして配置されてました

```html
<Counter :count="10" />
```

![counter.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513231/7bb00d78-6176-e5dc-6ba5-33e7f6a5ffee.gif)


### Tweet

componentsディレクトリ配下にはないが利用可能のようです

```html
<Tweet id="1390115482657726468" scale="0.65" />
```

![2021-05-19-21-52-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513231/c9fd9c27-20e4-3262-8693-fd1696e8d9e2.png)

# 最後に

いかがだったでしょうか？
Public Betaとは思えないクオリティのツールだったのではないでしょうか？
私は早くslidevを使ってどこかで発表したい気分でいっぱいです
皆様もslidevを使って発表してみましょう！