Marpを使ったスライド作成の学習メモ
目的
以下を実現するために、Cursor + Marpでの資料作成方法を学習した。
スライド資料作成の効率化
バージョン管理の容易化
素早い資料作成
Markdown記法の活用
自分用のアウトプット＆誰かのインプットになればと思い、残しておく。
Marpとは？
Marp、Markdown形式でスライド作成可能なツール。
Markdownのシンプルな記法、スライド作成に活用。
Marp、プラグインとしてエディタに追加可能。
Cursorエディタ、対応済み。
学習環境
MacBook Air(M1)
macOS Sonoma 14.5
Cursorエディタ
Marp for VS Code(拡張機能)
使い方
1. 事前準備の手順
1.1. 「Marp for VS Code」のインストール
Cursorエディタで「VS Code」の拡張機能利用可能。
「Marp for VS Code」をインストールすると、拡張小脳としてMarpが利用可能。
手順、以下の通り。
Cursorの画面右下、存在する「拡張機能」アイコンのクリック。
検索バーへの「Marp for VS Code」の入力、表示結果からのインストール選択。
1.2. Node.jsの確認とインストール
MarpはNode.jsを基に動作。
Node.jsがインストールされていることを確認必要。
Macユーザーは以下のコマンドでインストール可能。
brew install node2. Marp Markdownの基本設定
2.1. Markdownファイルを作成
Cursor内、新しいMarkdownファイルの作成。
メニューの「ファイル」>「新規ファイル」からのファイル作成、.md拡張子での保存。<br>
例）presentation.md という名前。
2.2. スライドデッキ作成の準備
Markdownファイル内の最初に、Marpの機能を有効化するためのコードの記載が必要。
以下の記載がないと、スライド資料として認識されない。
---
marp: true
---
2.3. スライドの作成
スライドの区切りには --- を使用。
---
marp: true
---
# タイトルスライド
ここが最初のスライドです。
---
# 次のスライド
これは2枚目のスライドです。
3. Marpの便利な機能
3.1. プレビュー機能
Marp有効後、プレビューしての確認可能。
編集中のスライドをリアルタイムで確認可能。
3.2. スライドのエクスポート
作成したスライドをエクスポート可能。
HTML
PDF
PowerPoint (PPTX)
画像 (PNG / JPEG - 最初のスライドのみ)
エクスポートの手順は以下の通り。
VS Codeの「コマンドパレット」を開く（ショートカットはCmd + Shift + P）。
「Export slide deck」と入力し、該当するオプションを選択。
エクスポート形式を選択するメニューが表示。
希望の形式を選択してエクスポートを完了。
3.3. カスタムテーマの使用
カスタムCSSを使って独自のテーマを作成可能。
#サンプル：
---
marp: true
theme: default
backgroundColor: #ffeb3b
color: #000000
---
# カスタム背景のスライド
このスライドは黄色の背景を持っています。
4. よく使うディレクティブ
Marpでは特定の設定を「ディレクティブ」という形で指定可能。
paginate: true — 各スライドの右下にページ番号を表示します。
theme: gaia — テーマを指定します。
スライドにディレクティブを追加すると、簡単にスタイルを変更可能。
#例：
---
marp: true
paginate: true
theme: gaia
---
# ページ番号付きスライド
これはページ番号付きのスライドです。5. まとめ
Cursorに「Marp for VS Code」拡張機能のインストールすればMarp利用できる。
Markdownファイルに「marp: true」の指定で、スライドとして認識される。
プレビュー機能とエクスポート機能がある。
ディレクティブとカスタムテーマ、スライドのカスタマイズができる。。