構文ガイド
Slidev のスライドはマークダウンファイルで記述されており、Slidev Markdown と呼ばれます。プレゼンテーションは Slidev Markdown をエントリーポイントとしており、デフォルトでは ./slides.md ですが、CLI コマンド に引数としてファイルパスを渡すことで変更できます。
Slidev Markdown では、基本的なマークダウン機能 をいつも通り使用できるだけでなく、Slidev はスライドを強化するための追加機能も提供します。このセクションでは、Slidev で導入された構文について説明します。このガイドを読む前に、基本的なマークダウン構文を必ず理解しておいてください。
スライド分離記号
--- の前後に空行を入れてスライドを分離します。
# タイトル
こんにちは、**Slidev**!
---
# スライド 2
コードブロックを使用して強調表示:
```ts
console.log('Hello, World!')
```
---
# スライド 3
UnoCSS クラスと Vue コンポーネントを使用してスライドをスタイルし、豊かにします:
<div class="p-3">
<Tweet id="..." />
</div>フロントマター & ヘッドマター
各スライドの開始時に、オプションの フロントマター を追加してスライドを設定できます。最初のフロントマターブロックは ヘッドマター と呼ばれ、スライドデック全体を設定できます。残りは個々のスライドの フロントマター です。ヘッドマターまたはフロントマターのテキストは YAML 形式のオブジェクトである必要があります。例えば:
---
theme: seriph
title: Slidev へようこそ
---
# スライド 1
このスライドのフロントマターは、ヘッドマターでもあります
---
layout: center
background: /background-1.png
class: text-white
---
# スライド 2
`center` レイアウトと背景画像を持つページ
---
# スライド 3
フロントマターなしのページ
---
src: ./pages/4.md # このスライドはフロントマターのみを含みます
---
---
# スライド 5使用できる設定は スライドデッキの設定 と スライドごとの設定 セクションで説明されています。
ヘッドマターをより読みやすくするために、VSCode 拡張機能をインストールできます。
また、別のフロントマター形式も利用できます。
ノート
各スライドのプレゼンターノートを作成することもできます。プレゼンテーション中に参照するため、📖 ユーザーインターフェース に表示されます。
各スライドの末尾にあるコメントブロックはスライドのノートとして扱われます。
---
layout: cover
---
# スライド 1
これはカバーページです。
<!-- これは **ノート** です -->
---
# スライド 2
<!-- このコメントはスライドの最後にないため、ノートではありません -->
2 番目のページ
<!--
これは _別の_ ノートです
-->基本的なマークダウンと HTML もノートでサポートされており、レンダリングされます。
コードブロック
Slidev の作成に至った大きな理由の 1 つは、スライド内のコードを完璧に表示する必要があったからです。したがって、マークダウン風のコードブロックを使用してコードを強調表示できます。
```ts
console.log('Hello, World!')
```Slidev には構文ハイライター として Shiki がビルトインされています。詳細は Shiki の設定 を参照してください。
コードブロックの詳細:
LaTeX ブロック
Slidev は数学および化学方程式のために LaTeX ブロックをサポートしています。
ダイアグラム
Slidev はテキストからダイアグラムを作成するために Mermaid と PlantUML をサポートしています。
MDC 構文
MDC 構文は要素にスタイルとクラスを適用する最も簡単な方法です。
スコープ付き CSS
スコープ付き CSS を使用してスライドをスタイルできます。