コンテンツにスキップ

Marp プレゼンテーション

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

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

  1. Cmd+,(macOS)または Ctrl+,(Windows/Linux)で設定を開く
  2. 詳細設定 > レンダリング拡張 を開く
  3. Marp(プレゼンテーション) をオンにする

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

---
marp: true
---
# スライド 1
プレゼンテーションへようこそ!
---
# スライド 2
- ポイント A
- ポイント B
- ポイント C
---
# スライド 3
ありがとうございました!

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

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

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

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

操作ショートカット
次のスライド右矢印 / 下矢印 / Space
前のスライド左矢印 / 上矢印
フルスクリーン終了Escape

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

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

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

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

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

利用可能な Marp テーマは defaultgaiauncover などがあります。

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

---
marp: true
---
![図表](./images/diagram.png)