はじめに

プレゼンテーション資料（スライド）を作成するとき、PowerPointやKeynote、Google Slidesを使うのが一般的だろう。 ただ、Markdownとしてテキストベースで管理したい、レイアウト調整に時間を取られたくない、と思うことも多い。

そこで、VS Code上でMarkdownを使ってスライドを作成できる「Marp for VS Code」という拡張機能を試してみることにした。

環境

VS Code: 1.109.0
Marp for VS Code: 3.3.0

Marp for VS Codeのインストール

VS Codeの拡張機能マーケットプレイスから「Marp for VS Code」をインストールする。

1. アクティビティバーの拡張機能アイコンをクリックする。
2. 検索バーに Marp for VS Code と入力する。
3. 以下の拡張機能をインストールする。

• Marp for VS Code - Visual Studio Marketplace https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode

実際に使ってみる

1. Markdownファイルの作成

適当なMarkdownファイル（例: slide.md）を作成し、先頭に以下のFrontmatterを記述する。 marp: true を記述することで、Marpが有効になる。

---
marp: true
theme: default
paginate: true
---

2. スライドの内容を書く

通常通りMarkdownを書いていく。スライドのページ区切りは --- （ハイフン3つ）を使用する。

# 1ページ目のタイトル

これは1ページ目の本文です。
Markdown記法が使えます。

- リスト項目1
- リスト項目2

---

# 2ページ目のタイトル

## 画像も貼れます

![bg right:40%](https://example.com/image.png)

背景に画像を配置したり、左右に分割したりといったレイアウトも、
特定の記法を使うことで簡単に実現できる。

3. プレビューの確認

ツールバーにあるMarpアイコン（三角形が2つ重なったようなアイコン）をクリックし、「Open Preview to the Side」を選択するか、Markdownのプレビューボタンを使用すると、スライド形式でプレビューが表示される。

リアルタイムに反映されるので、編集しながらの確認が非常にスムーズである。

4. PDFやHTMLへのエクスポート

作成したスライドは、PDF、HTML、PowerPoint（pptx）、画像などにエクスポートできる。

1. コマンドパレット（Ctrl+Shift+P / Cmd+Shift+P）を開く。
2. Marp: Export Slide Deck... を実行する。
3. 保存先とフォーマットを選択して保存する。

これだけで、配布用の資料としても十分に使えるクオリティのものが生成される。

参考

• Marp: Markdown Presentation Ecosystem
  https://marp.app/

• Marp for VS Code - Visual Studio Marketplace
  https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode

• Marp入門〜応用｜markdownでプレゼン資料を楽に素早く作って発表しよう
  https://zenn.dev/cota_hu/books/marp-beginner-advanced/viewer/intro

おわりに

Markdownでスライドが作れると、Gitでのバージョン管理が容易になるし、なにより書き慣れたエディタで完結するのが嬉しい。
凝ったアニメーションなどはPowerPointに分があるが、社内の勉強会や技術発表のような、内容重視の場面ではMarpの方が適していると感じた。

ちょっとしたスライド作成には積極的にMarpを使っていきたい。