見出し画像
Photo by peishum

Marpを使ったスライド作成の学習メモ

dacekinger

目的

以下を実現するために、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 node

2. 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 - 最初のスライドのみ)

  • エクスポートの手順は以下の通り。

    1. VS Codeの「コマンドパレット」を開く（ショートカットはCmd + Shift + P）。

    2. 「Export slide deck」と入力し、該当するオプションを選択。

    3. エクスポート形式を選択するメニューが表示。

    4. 希望の形式を選択してエクスポートを完了。

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」の指定で、スライドとして認識される。

  • プレビュー機能とエクスポート機能がある。

  • ディレクティブとカスタムテーマ、スライドのカスタマイズができる。。


この記事が気に入ったらサポートをしてみませんか？