翻訳はもう維持されていません、英語のドキュメントをご覧ください.
Slidev

Markdownシンタックス

スライドは 1つのマークダウンファイル (デフォルト： ./slides.md) の中に記述されます。

Markdownの機能は通常通り使用することができ、インラインHTMLとVueコンポーネントが追加でサポートされています。Windi CSSを使ったスタイリングもサポートされています。スライドを区切るには改行で囲まれた---を使用してください。

# Slidev

Hello, World!

---

# Page 2

コードブロックを直接使用してハイライト表示する

//```ts
console.log('Hello, World!')
//```

---

# Page 3

Windi CSSとVueコンポーネントを直接使用して、スライドをスタイリングし、リッチにすることができます。

<div class="p-3">
  <Tweet id="20" />
</div>

フロントマター & レイアウト

スライドのセパレータをフロントマターブロックに変換して、各スライドのレイアウトやその他のメタデータを指定します。各フロントマターはトリプルダッシュで始まり、トリプルダッシュで終わります。その間にあるテキストはYAML形式のデータオブジェクトになります。例：

---
layout: cover
---

# Slidev

これはカバーページです。

---
layout: center
background: './images/background-1.png'
class: 'text-white'
---​

# Page 2

これはレイアウト`center`とバックグラウンドイメージが指定されたページです。

---

# Page 3

これはいかなる追加のメタデータもない、デフォルトのページです。

詳細はカスタマイズを参照してください。

コードブロック

Slidevを開発した大きな理由の1つは、自分のコードをスライド上で正しく見せる必要があるためです。SlidevではMarkdownフレーバーなコードブロックを使って、意図した通りにコードをハイライトすることができます。

//```ts
console.log('Hello, World!')
//```

SlidevはシンタックスハイライターとしてPrismとShikiをサポートしています。詳細はシンタックスハイライトを参照してください。

行のハイライト

特定の行をハイライトするためには、ブラケット{}の中に単純に行番号を追加するだけです。行番号のカウントは1から始まります。

//```ts {2,3}
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))
}
//```

このサンプルでは、はじめにa: Ref<number> | numberとb: Ref<number> | numberを、次にクリックがされた後にreturn computed(() => unref(a) + unref(b))を、最後にコードブロック全体をハイライトします。詳細はアニメーションガイドを参照してください。

Monacoエディタ

プレゼンテーション中になんらかの変更を加えたいときは、言語名の後ろに{monaco}を追加するだけで、ブロックが完全なMonacoエディタに切り替わります！

//```ts {monaco}
console.log('HelloWorld')
//```

詳細はMonacoの設定を参照してください。

埋め込みスタイル

Markdownで直接<style>タグを使用すると、現在のスライドのスタイルをオーバーライドすることができます。

# このページはRed

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

---

# 次のスライドには適用されない

Markdown内の<style>タグは常にscopedです。グローバルにスタイルをオーバーライドする場合は、スタイルを参照してください。

Windi CSSを搭載しているため、 ネストしたCSSやdirectives (e.g. @apply)を直接利用することができます。

# Slidev

> Hello `world`

<style>
blockquote {
  code {
    @apply text-teal-500 dark:text-teal-400;
  }
}
</style>

静的アセット

Markdownで書くのと同じように、リモートまたはローカルのURLを指定して画像を使用することができます。

リモートのアセットについては、ビルトインのvite-plugin-remote-assetsが初回実行時にディスクにキャッシュするため、あとで大きなサイズの画像を読み込み場合でもすぐに読み込むことができます。

![リモートの画像](https://sli.dev/favicon.png)

ローカルのアセットについては、publicフォルダに格納し、頭にスラッシュをつけて参照します。

![ローカルの画像](/pic.png)

カスタムサイズやスタイルを適用したい場合は、<img>タグに変換することもできます。

<img src="/pic.png" class="m-40 h-40 rounded shadow" />

ノート

各スライドにメモを取ることもできます。メモはプレゼンターモードに表示され、プレゼンテーションの際に参照することができます。

Markdownでは、各スライドの最後のコメントブロックはノートとして扱われます。

---
layout: cover
---

# Page 1

これはカバーページです。

<!-- これはノートです -->

---

# Page 2

<!-- これは、スライドの内容より前にあるため、ノートではありません。 -->

2ページ目

<!--
これもまたノートです
-->

アイコン

Slidevを使用すると、Markdownの中でほとんどすべての人気のあるオープンソースのアイコンセットに直接アクセスすることができます。vite-plugin-iconsとIconifyによって提供されています。

命名はIconifyの{collection-name}-{icon-name}の形式に従います。例：

利用可能なすべてのアイコンはIcônesで閲覧・検索できます。

アイコンのスタイリング

他のHTML同様にアイコンをスタイルすることができます。例：

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

スロット

v0.18から使用可能です

レイアウトによっては、名前付きスロットを使用して、複数のコントリビューションポイントを提供できます。

例えば、two-colsレイアウトでは、左 (defaultスロット）と右 (right スロット）の2つのカラムを並べることができるようになります。

---
layout: two-cols
---

<template v-slot:default>

# Left

これは左側に表示されます。

</template>
<template v-slot:right>

# Right

これは右側に表示されます。

</template>

左

これは左側に表示されます。

右

これは右側に表示されます。

またスロット名のショートハンドシンタックスシュガー::name::も用意されています。次の例は前に示した例と全く同じように動作します。

---
layout: two-cols
---

# Left

これは左側に表示されます。

::right::

# Right

これは右側に表示されます。

またデフォルトのスロットを明示的に指定し、カスタムオーダーで提供することも可能です。

---
layout: two-cols
---

::right::

# Right

これは右側に表示されます。

::default::

# Left

これは左側に表示されます。

設定

必要な設定はすべてMarkdownファイルで定義することができます。 例：

---
theme: seriph
layout: cover
background: 'https://source.unsplash.com/1600x900/?nature,water'
---

# Slidev

これはカバーページです。

詳細はフロントマターの設定を参照してください。

LaTeX

SlidevはKaTeXによってLaTeXをサポートしています。

インライン

インラインで表示する場合は、LaTeXの両側を1つの$で囲います。

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

ブロック

ブロックで表示するには、2つの ($$)を使います。このモードではより大きな記号を使用し、結果を中央に配置します。

$$
\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}
$$

詳細： デモ | KaTeX | markdown-it-katex

図形

Mermaidを利用して、Markdownのテキスト記述から図 / グラフを作成することも可能です。

mermaidとして指定されたコードブロックは図形に変換されます。 例：

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

さらにオプションオブジェクトを渡すことで、スケーリングやテーマを指定することができます。オブジェクトのシンタックスはJavaScriptのオブジェクトリテラルで、文字列には引用符（')を、キーの間には（,)を追加する必要があります。

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

詳細： デモ | Mermaid

マルチプルエントリー

v0.15から使用可能です

slides.mdを複数のファイルに分割して、好きなように整理することができます。

slides.md :

# Page 1

これは通常のページです。

---
src: ./subpage2.md
---

<!-- このページは'./subpage2.md'から読み込まれます -->
インラインコンテンツは無視されます

subpage2.md :

# Page 2

このページは別のファイルのものです

フロントマターのマージ

フロントマターはメインのエントリーと外部のMarkdownページの両方から指定することができます。もし同じキーがある場合は、メインエントリに記載されている内容がより優先度が高くなります。例：

slides.md :

---
src: ./cover.md
background: https://sli.dev/bar.png
class: text-center
---

cover.md :

---
layout: cover
background: https://sli.dev/foo.png
---

# カバー

カバーページ

以下のページと同じように評価されます：

---
layout: cover
background: https://sli.dev/bar.png
class: text-center
---

# カバー

カバーページ

ページの再利用

マルチエントリーにより、ページの再利用が容易になります。例：

---
src: ./cover.md
---

---
src: ./intro.md
---

---
src: ./content.md
---

---
# reuse
src: ./content.md
---