slidev-syntax-guide

Slidev 構文ガイド

このスキルでは、スライドの区切り、フロントマター、ノート、MDC 構文など、Slidev の拡張 Markdown 構文と利用可能なすべての特殊な書式機能について説明します。

このスキルを使う場面

• Slidev の Markdown 拡張機能を学ぶ
• 複雑なスライドコンテンツを作成する
• 高度な書式機能を使用する
• 構文の問題をトラブルシューティングする
• 標準の Markdown を Slidev 形式に変換する

スライドの区切り

基本の区切り

空行を入れて、3 つのダッシュを使用します。

# Slide 1

Content here

---

# Slide 2

More content

フロントマター付きの区切り

スライドごとの設定を追加します。

# Slide 1

---
layout: center
class: text-blue-500
---

# Centered Blue Slide

フロントマター

グローバル設定（最初のスライド）

---
theme: seriph
title: My Presentation
info: |
  ## Presentation Description
  Multi-line info text
colorSchema: auto
highlighter: shiki
drawings:
  persist: false
transition: slide-left
mdc: true
---

スライドごとの設定

---
layout: two-cols
class: my-custom-class
transition: fade
clicks: 3
disabled: false
hide: false
---

よく使うフロントマターのオプション

オプション	型	説明
layout	string	スライドのレイアウト名
class	string	CSS クラス
transition	string	スライドのトランジション
background	string	背景画像／色
clicks	number	スライドのクリック総数
disabled	boolean	スライドを無効にする
hide	boolean	ナビゲーションから非表示にする
preload	boolean	サイズの大きいコンテンツを事前に読み込む

発表者ノート

コメント構文

# My Slide

Visible content

ノートの位置

ノートは、すべてのコンテンツの後、スライドの末尾に置く必要があります。

MDC 構文（Markdown コンポーネント）

フロントマターで有効にします。

---
mdc: true
---

インラインスタイル

This is [important text]{.text-red-500.font-bold}

This has a [tooltip]{title="Hover me!"}

ブロックスタイル

::div{.flex.gap-4}
Content inside a flex container
::

::section{#my-section .bg-blue-100}
Section with ID and class
::

コンポーネント構文

:Icon{name="carbon:arrow-right" size="24"}

::Alert{type="warning"}
Warning message here
::

リスト

標準のリスト

- Item 1
- Item 2
  - Nested item
  - Another nested
- Item 3

1. First
2. Second
3. Third

クリックアニメーション付きリスト

<v-clicks>

- Appears first
- Appears second
- Appears third

</v-clicks>

深さを指定する場合：

<v-clicks depth="2">

- Parent 1
  - Child 1.1
  - Child 1.2
- Parent 2
  - Child 2.1

</v-clicks>

画像

基本の画像

![Alt text](/images/photo.jpg)

サイズ指定した画像

![Alt text](/images/photo.jpg){width=400}

スタイル指定した画像

![Alt text](/images/photo.jpg){.rounded-lg.shadow-xl}

背景画像（フロントマターを使用）

---
background: /images/cover.jpg
class: text-white
---

# Title Over Image

リンク

標準のリンク

[Slidev Documentation](https://sli.dev)

ナビゲーションリンク

[Go to slide 5](/5)
[Go to slide with ID](#my-slide)

新しいタブで開く外部リンク

<a href="https://sli.dev" target="_blank">Open in new tab</a>

テーブル

| Feature | Supported |
|---------|-----------|
| Markdown | ✅ |
| Vue Components | ✅ |
| Animations | ✅ |
| Export | ✅ |

引用

> This is a quote
> spanning multiple lines

> [!NOTE]
> GitHub-style callout

水平線

Content above

---

Content below (this also creates a new slide!)

スライドを区切らずに水平線を引くには、<hr> を使用します。

Content above

<hr>

Content below (same slide)

Markdown 内の HTML

インライン HTML

This is <span class="text-red-500">red text</span> inline.

ブロック HTML

<div class="grid grid-cols-2 gap-4">
  <div>Column 1</div>
  <div>Column 2</div>
</div>

エスケープ

コードブロックのマーカーをエスケープする

内容よりも多くのバッククォートを使用します。

Here's how to write a code block:

```js
const x = 1
```

フロントマターをエスケープする

\---
This is not frontmatter
\---

スロット構文

複数のコンテンツ領域があるレイアウトの場合：

---
layout: two-cols
---

# Left side content

::right::

# Right side content

名前付きスロット

---
layout: my-custom-layout
---

::header::
Header content

::default::
Main content

::footer::
Footer content

グローバルレイヤー

上部レイヤー（すべてのスライドより上）

global-top.vue を作成します。

<template>
  <div class="absolute top-0 left-0 p-4">
    <img src="/logo.png" class="h-8" />
  </div>
</template>

下部レイヤー（すべてのスライドより下）

global-bottom.vue を作成します。

<template>
  <div class="absolute bottom-0 right-0 p-4 text-sm">
    © 2025 My Company
  </div>
</template>

スコープ付きスタイル

単一のスライドに CSS を追加します。

# Styled Slide

<style>
h1 {
  color: #2563eb;
  font-size: 3em;
}
</style>

特殊文字

絵文字

🚀 Rocket launch!
👋 Hello world!

アイコン（UnoCSS を使用）

<carbon-arrow-right class="inline" />
<mdi-github class="text-2xl" />

ベストプラクティス

1. 一貫性のあるフロントマター：スライド全体で同じ構造を使用します
2. 意味のある ID：リンク先にするスライドには ID を追加します
3. ノートを整理する：発表者ノートは簡潔で、実行に移しやすい内容にします
4. MDC の使用は控えめに：インラインスタイルを多用しないようにします
5. 区切りを確認する：--- の前後に空行があることを確認します

よくある構文エラー

❌ 空行がない

# Slide 1
---
# Slide 2

✓ 正しい例

# Slide 1

---

# Slide 2

❌ 無効な YAML

---
theme:default
---

✓ 正しい YAML

---
theme: default
---

❌ コンテンツの前にノートがある

# Heading

✓ 末尾にノートがある

# Heading

Content

出力形式

Slidev のコンテンツを作成するときは、次の構造に従います。

---
[FRONTMATTER: theme, layout, class, etc.]
---

# [SLIDE TITLE]

[MAIN CONTENT]
- Use Markdown formatting
- Include code blocks where relevant
- Add images with proper paths

[OPTIONAL: Vue components or HTML]