Marp for VSCodeに入門します！

2025年1月16日にMarp CLI v4.1.0がリリースされ、編集可能なPowerPointの出力が可能になった記事を見ました！
参考リンク：https://qiita.com/youtoy/items/e7168d762d3fe909d278
公式リンク：https://github.com/marp-team
VSCodeの拡張機能であるMarp for VSCodeを使った作成を試してみたいと思います。

作成手順

1. Marp for VS Codeをインストール

VSCodeの拡張機能からインストールします。

2. .mdファイルを作成

生成AIにMarpの説明に関する.mdファイルを作成してもらいました。

---
marp: true # Marpに対応させるため必要
---

# Marpについて

Marpは、Markdownを使ってプレゼンテーションを作成するためのツールです。シンプルで直感的な機能を提供し、開発者やデザイナーにとって便利な選択肢となっています。

---

## 特徴

- **Markdownベース**: 簡潔な文法でスライドを作成できます。
- **テーマのカスタマイズ**: 自分好みのテーマを簡単に作成できます。
- **リアルタイムプレビュー**: 編集と同時にスライドの確認が可能です。
- **エクスポート機能**: PDFやHTML形式でのエクスポートが可能です。

---

## インストール

MarpはNode.jsを用いてインストールできます。以下のコマンドを実行してください。

```bash
npm install -g @marp-team/marp-cli

3.mdをMarpで出力

右上のMarpアイコンをクリックする。

Export Slide Deck...をクリックします。

出力先を設定し、Exportすると出力されます。※デフォルトではPDF形式で出力されます。

4.Marp for VSCodeの設定を編集可能なパワポ出力に変更

ここから、Marp for VSCodeの設定を変更し、編集可能なパワポを出力します。
まずはMarpアイコンをクリックし、Open Extension Settingsから設定画面を開きます。

○Markdown - Marp: Export Type をpptx、Markdown - Marp: Export Auto Openをon、
Pptx: Editableをonに変更します。
※ Export Auto Openをonにしないと出力されてpptxが削除されてしまう。

設定項目	説明	デフォルト設定
Markdown - Marp: Breaks	Marp Markdownでの改行のレンダリング方法を設定します。Marpエコシステムのデフォルト設定がVS Codeの設定と異なるため、個別に設定できます。	off
Markdown - Marp: Browser	PDF、PPTX、および画像をエクスポートするために内部的に使用されるインストール済みのブラウザを制御します。	auto
Markdown - Marp: Browser Path	PDF、PPTX、および画像をエクスポートするために内部的に使用されるインストール済みのブラウザのカスタムパスを設定します。空に設定すると自動で見つけます。	空
Markdown - Marp: Export Auto Open	エクスポートされたファイルを、オペレーティングシステムにインストールされているデフォルトのアプリケーションを使用して自動的に開きます。	off
Markdown - Marp: Export Type	デフォルトのエクスポートタイプを設定します。	pdf
Markdown - Marp: HTML	Marp Markdown内のHTML要素がレンダリングされたスライドで有効になるかどうかを設定します。ワークスペースが信頼されていない場合、常に「off」です。	default
Markdown - Marp: Math Typesetting	Marp Coreでの数式の構文とデフォルトのライブラリを制御します。数式のレンダリングが設定に従っていない場合があります。	mathjax
Markdown - Marp: Outline Extension	Marp Markdownのアウトライン拡張機能を有効にします。VS Codeのアウトラインビューがスライドスプリッターを反映します。	off
Markdown - Pdf: Note Annotations	プレゼンターノートをPDFに注釈として追加します。	off
Pdf: Outlines	エクスポートされたPDFにアウトライン（ブックマーク）を追加します。	off
Pptx: Editable	エクスポートされたPowerPointドキュメントが編集可能かどうかを決定します。編集可能なPPTXの出力が失敗することがあります。	off
Strict Path Resolution During Export	エクスポート中の厳密なパス解決を有効にします。無効にするとローカルファイルシステムに基づいてパスを解決します。	無効
Themes	Marp CoreおよびMarpitフレームワーク用の追加テーマCSSのURLまたはローカルパスのリストを追加します。	空

5.エラーの対処

再出力をすると以下のエラーが発生します。

編集可能なパワポの出力には、「LibreOffice Impress」が必要みたいです。
ダウンロードリンク：https://ja.libreoffice.org/download/download/

6.再実行して出力を確認

編集可能なPowerPointの出力ができました！

ただ、英語や日本語、記号でフォントが異なることにより、まとまりが悪く、編集が手間なパワポだったので、カスタムCSSでフォントの固定をすることで、編集しやすい状態での出力に修正をしたいと思います。

style: |
  body {
    font-family: "メイリオ", "Meiryo", sans-serif;
  }
  h1, h2, h3, p, li {
    font-family: "メイリオ", "Meiryo", sans-serif;
  }

フォントが揃うことで1つのまとまりになり編集しやすくなりました。

7.カスタマイズの紹介

今回は入門なので、色の変更や画像の挿入を試してみました。
画像も編集可能な状態で出力されました。これは便利ですね、、、！
きちんと指定すればPowerPointで作成されたスライドに匹敵するクオリティが可能という事なので、また確認したいと思います。

---
marp: true
style: |
  body {
    font-family: "メイリオ", "Meiryo", sans-serif;
  }
  h1, h2, h3, p, li {
    font-family: "メイリオ", "Meiryo", sans-serif;
  }
  img.custom-size {
    width: 150px; /* 幅を150pxに設定 */
    height: auto; /* 高さは自動調整 */
  }
---

# <span style="color: red;">Marpについて</span>

---

## 特徴

- **Markdownベース**: 
  > 💬 「簡潔な文法でスライドを作成できます。」

- **テーマのカスタマイズ**: 
  > 💬 「自分好みのテーマを簡単に作成できます。」

- **リアルタイムプレビュー**: 
  > 💬 「編集と同時にスライドの確認が可能です。」

- **エクスポート機能**: 
  > 💬 「PDFやHTML形式でのエクスポートが可能です。」

---

## インストール <img src="job_it_dokata.png" class="custom-size" alt="画像説明">

MarpはNode.jsを用いてインストールできます。以下のコマンドを実行してください。

```bash
npm install -g @marp-team/marp-cli

出力結果

感想

カスタムCSSを作りこんで、生成AIでMarkdownの適切なプロンプトを整備することで、社内資料やマニュアル資料、勉強会資料等の作成は圧倒的な効率化の可能性を感じました！