10
13

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-05-19

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

2021-05-19-19-53-13.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

順番にハイライトさせる

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

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

step.gif

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

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

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

monaco.gif

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

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

# 赤色タイトルのページ

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

---

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

2021-05-19-20-14-57.png

ノート機能

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

# Page 1

This is the cover page.

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

2021-05-19-20-20-17.png

アイコン

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

2021-05-19-20-43-12.png

スタイリングアイコン

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

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

styleingIcon.gif

ダイアグラム

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

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

2021-05-19-20-51-45.png

グリッド

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>

image.png

ナビゲーション

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

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

2021-05-19-20-55-39.png

アニメーション

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

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

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

v-click.gif

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

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

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

v-after.gif

v-clicks

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

<v-clicks>

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

</v-clicks>

v-clicks.gif

テーマを使用する

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

```
theme: seriph
```

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

テーマを変更する

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

2021-05-19-21-06-51.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 背景画像指定

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

コンポーネント

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

配置方法

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

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

Counter

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

<Counter :count="10" />

counter.gif

Tweet

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

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

2021-05-19-21-52-00.png

最後に

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

10
13
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
13

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?