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

13784 ワード
Slidev Vue.js プレゼンテーション Vue.js テキストリンク

Slidevとは？

Slidevとは何かについては以下等読んでいただければと思います。
開発者のためのスライド作成ツール Slidev がすごい
簡単にいうとマークダウンから発表用スライドを作成するすごいツールです。
元から録画機能がついていたり、画面右下にカメラの映像を流せたり、すごいことがいっぱいなのですが、
本記事ではSlidevガイドを元にどのようにマークダウンを書けば良いのかを紹介したいと思います。

もっと詳細を見たい方はSlidevガイドを見てください。
※本記事作成時点ではガイド工事中のため一部記載不足があるようです。

Slidev 初期セットアップ

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

npm init slidev

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

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

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

ページ区切り

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

# ページ 1

---　 ← ページ区切り

# ページ 2

レイアウト設定

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

# 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))
}
```

行の強調表示

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

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

順番にハイライトさせる

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

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

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

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

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

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

markdown内に直接styleタグを記述することで
現在のスライドのスタイルを変更できます。

※当然次のスライドには影響がありません。

# 赤色タイトルのページ

<style>
h1 {
  color: red
}
</style>

---

# 次のページには影響がない

ノート機能

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

# Page 1

This is the cover page.

<!-- コメントブロックに書くとノートになります -->

アイコン

Iconifyにしたがって{collection-name}-{icon-name}でアイコンを表示することができます

スタイリングアイコン

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

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

ダイアグラム

Mermaidを使って図・グラフを生成することもできます

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

グリッド

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

<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>

ナビゲーション

発表中画面下部にマウスを持っていくと表示されるナビゲーションです。
公式ガイドを参照してください。

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

アニメーション

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

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

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

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

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

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

v-clicks

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

<v-clicks>

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

</v-clicks>

テーマを使用する

レイアウト設定で説明したfrontmatterで

```
theme: seriph
```

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

テーマを変更する

テーマギャラリーからテーマを追加することができます。

このページにあるテーマ名を指定すると(以下例では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 背景画像指定

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

コンポーネント

公式ガイドコンポーネントページが工事中のため、わかる範囲で記載しております

配置方法

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

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

Counter

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

<Counter :count="10" />

Tweet

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

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

最後に

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