Marp プレゼンテーション

Bokuchi は Marp を使い、Markdown ファイルをスライドプレゼンテーションとしてレンダリングできます。Markdown でスライドを書き、プレゼンテーションとしてプレビューできます。別途プレゼンテーションソフトは不要です。

Marp を有効にする

Marp はデフォルトで無効です。有効にするには：

Markdown ファイルの先頭にある YAML フロントマターに marp: true を追加します。スライドの区切りには ---（ハイフン3つを単独の行に記述）を使います。

---
marp: true
---

# スライド 1

プレゼンテーションへようこそ！

---

# スライド 2

- ポイント A
- ポイント B
- ポイント C

---

# スライド 3

ありがとうございました！

フロントマターに marp: true が検出されると、プレビューが自動的にプレゼンテーションモードに切り替わります。

Marp プレゼンテーションは、現在の表示モードによって動作が異なります：

すべてのスライドがプレビューペインに縦並びで表示されます。エディタとスライドが連動してスクロールするため、編集中のスライドを常に確認できます。

スライドが1枚ずつ表示され、ナビゲーションコントロールが使えます：

上部にスライドカウンター（例：「スライド 2 / 10」）が表示されます。

プレビューヘッダーのフルスクリーンボタンをクリックすると、現在のスライドが16:9のアスペクト比で暗い背景に表示されます。Escape で終了します。

プレビューヘッダーのグリッドボタンをクリックすると、すべてのスライドを一覧で確認できます。サムネイルをクリックすると、そのスライドにジャンプします。

Marp はビルトインテーマに対応しています。フロントマターでテーマを指定できます：

---
marp: true
theme: gaia
---

利用可能な Marp テーマは default、gaia、uncover などがあります。

内蔵テーマに加えて、CSS ファイルを置いたフォルダから独自の Marp テーマを登録できます。

設定 > 詳細を開きます（Marp を有効にしておく必要があります）。
Marp テーマフォルダ で フォルダを選択… をクリックし、.css テーマファイルが入ったフォルダを選びます。
Bokuchi がフォルダを読み取り、見つかったテーマを一覧表示します。ファイルを追加・変更したら 再読み込み、フォルダを外すには クリア を使います。

各 CSS ファイルは、先頭にテーマ名を記した @theme ヘッダーがあれば、選択できるテーマになります。

/* @theme my-theme */

section {
  background: #fdf6e3;
  color: #333;
}

あとは内蔵テーマと同じように、スライドのフロントマターでその名前を指定します。

---
marp: true
theme: my-theme
---

Markdown 内の相対パスの画像は Marp プレゼンテーション内でも動作します。Bokuchi が自動的にパスを解決し、プレビューで正しく画像を表示します。

---
marp: true
---

![図表](./images/diagram.png)