Markdownで簡単にプレゼン資料が作成出来るSlidevを使ってみた

Markdownで簡単にスライド作成ができる、Slidevというツールができたので使ってみました。

https://sli.dev/

上記のオフィシャルを見れば大体わかることかもしれませんが...簡単にポイントをまとめてみました。

## インストールについて

こちらのコマンドだけです。
ターミナルの中で、slidevインストールするのに使うツール（npm or yarn)
プロジェクト名称なんかを聞かれるだけです。

※ちなみにプロジェクト名でフォルダが作成されますので、予め作っておく必要はありません。

```bash
npm init slidev@latest
```

起動完了したら、`http://localhost:3030/`で下記のようなスライドが立ち上がります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/194056/be177320-78f9-ae31-0a04-bc766382ad06.png)

スライドの画像はunsplashを使っているようです。

https://unsplash.com/

## ファイル構成について

あまりややこしいことを覚える必要はなく...スライドは`slides.md`のファイルに書いていきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/194056/8ed15486-5290-4452-3b97-b6946ac6e2e5.png)

## `slides.md`ファイルについて

#### スライドの区切りは`---`で区切る。
ちょっとまだルールが判っていないですが、そのスライドのレイアウトの設定を入れる際はさらに`---`で区切るようです。

```md
---
layout: image-right
image: https://source.unsplash.com/collection/94734566/1920x1080
---

# Code

Use code snippets and get the highlighting directly!
...
```

#### ページに個別のstyleタグの挿入が可能

各ページに個別に`<style>`タグを入れることができるようです。

```html
<style>
h1 {
  background-color: #2B90B6;
  background-image: linear-gradient(45deg, #4EC5D4 10%, #146b8c 20%);
  background-size: 100%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent; 
  -moz-text-fill-color: transparent;
}
</style>
```

#### ソースコードにハイライトの設定が可能

ソースコードの指定は通常のMarkdownの通り`shift+@`で指定しますが、`{}`でハイライトの設定ができるようです。

下記コードの２行目の`{all|2|1-6|9|all}`でソースコードの全て、２行目のみ、１行目から６行目、９行目、全ての順でハイライトされるようになります。

```md
```ts {all|2|1-6|9|all}
interface User {
  id: number
  firstName: string
  lastName: string
  role: string
}

function updateUser(id: number, update: User) {
  const user = getUser(id)
  const newUser = {...user, ...update}  
  saveUser(id, newUser)
}
```

### テーマ

オフィシャルに幾つかありますが、まだ出たばっかりのツールなのか、あまり充実はしていないようです。
ファイルの先頭で指定します。

```md
---
# try also 'default' to start simple
theme: seriph
---
```

#### Vueコンポーネントの挿入が可能

Vueベースでできているツールのようで、コンポーネントの挿入が可能のようです。
`<Tweet/>`や`<>Youtube/>`なんかはデフォルトでサポートされているようです。

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

#### LaTexのサポート

そもそも詳しく無いですが、LaTexのサポートがあるようです。

```md
Inline $\sqrt{3x-1}+(1+x)^2$

Block
$$
\begin{array}{c}

\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} &
= \frac{4\pi}{c}\vec{\mathbf{j}}    \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\

\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\

\nabla \cdot \vec{\mathbf{B}} & = 0

\end{array}
$$
```

結果

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/194056/b245d28b-7e6f-469d-700d-a3cf55dd86b8.png)

#### ダイヤグラムのサポート

フローチャートなんかも描けるようです。

```md
```mermaid {scale: 0.9}
sequenceDiagram
    Alice->John: Hello John, how are you?
    Note over Alice,John: A typical interaction
```

```md
```mermaid {theme: 'neutral', scale: 0.8}
graph TD
B[Text] --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
```

結果

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/194056/1ea1a5ae-18a5-35cd-3715-2ddaf28e4462.png)


## エクスポートについて

スライドは簡単にPDF等でエクスポートできるようです。
まず、`playwright-chromiun`というツールをインストールします。

```bash
npm i -D playwright-chromium
```

インストールが完了したら、次のコマンドで簡単にエクスポートできます。

```bash
slidev export
```

## 最後に

まだベータ版のようですが、シンプルでおしゃれなスライドが作れそうなのでちょっと色々試していきたいと思います。

スライドもマークダウンで作った方が記載や資料のレイアウトにまとまりができるので良いですね。（Googleスライドや、MSpptは真っ白のキャンバスに書くことになるので、こっちはこっちでスライド毎に自由な記載になってしまいがち。。）