レビュー

Visual Studio Code＋Markdownでキレイなプレゼンスライドを手軽に作成できる「Marp」

Markdownに慣れているのならばちょっとした拡張記法を覚えるだけ

樽井秀人

2022年7月4日 17:08

「Marp for VS Code」v2.1.0

　「Marp」（Markdown Presentation Ecosystem）は、Markdown記法で手軽に美しいプレゼンテーションスライドを作成できるオープンソースのソリューション（ライセンスは「MIT License」）。コアとなるフレームワークやコマンドラインで利用できるCLIツールのほかにも「Visual Studio Code」向け拡張機能「Marp for VS Code」が用意されており、手軽に始められるのも魅力といえる。

　「Marp for VS Code」は、「Visual Studio Marketplace」から無償でダウンロード可能。「Visual Studio Code」の［拡張機能］ビューから検索・インストールすることもできる。

「Visual Studio Code」の［拡張機能］ビューから検索・インストールすることもできる

　拡張機能のセットアップが完了したら、「Visual Studio Code」の［ファイル］－［新しいファイル］メニューから新規ファイルを作成しよう。「Marp Markdown」という項目をクリックすると、以下のようなMarkdownドキュメントが作成される。

---
marp: true
---

「Visual Studio Code」の［ファイル］－［新しいファイル］メニューから新規ファイルを作成。「Marp Markdown」という項目をクリック

「Marp」のMarkdownドキュメントのひな型（YAML Front Matter）が作成される

　「Marp」のMarkdown記法は、「CommonMark」を拡張したものとなっている。違いはページを分割するために「---」が用いられること、ディレクティブと拡張構文という仕組みが導入されていることだ。

　「ディレクティブ」はスライドのテーマ、ヘッダー、フッター、スタイルなどを指定するための仕組み。先ほどの新規ドキュメントの先頭に挿入されていたものがそれで、「---」で囲ってドキュメントの先頭に配置する（YAML Front Matter）。また、HTMLコメントとして記述し、そのページの背景色を指定したりすることも可能。

　試しに以下のような「Marp」のMarkdownドキュメントを作成し、タブバー右端のプレビューボタンを押してみよう。

---
marp: true
theme: gaia
footer: "**madonomori**"
---

1枚目のスライド

---



2枚目のスライド

---



3枚目のスライド

　3つのページを持つスライドが表示されるが、2番目のスライドだけ背景色が異なるはずだ。

3つのページを持つスライドが表示されるが、2番目のスライドだけ背景色が異なる

　拡張構文は代替テキストで画像のサイズやエフェクトを指定したり、「$$」で囲んで数式を埋め込む（KaTeX、MathJaxなどの構文が利用可能）ために用いる。

---
marp: true
math: katex
---

# 数式と背景画像の例

![bg left](https://forest.watch.impress.co.jp/img/watch/parts/logo/wf.svg)

$$ I_{xx}=¥int¥int_Ry^2f(x,y)¥cdot{}dydx $$

$$
f(x) = ¥int_{-¥infty}^¥infty
    ¥hat f(¥xi)¥,e^{2 ¥pi i ¥xi x}
    ¥,d¥xi
$$

数式と背景画像の例。画像は幅や高さを指定したり、エフェクトをかけることもできる

　難しいことはさておき、まずは「Front Matter」の書き方と「---」で改ページすること、一般的なMarkdown記法が使えることだけを覚えておき、あとは追々覚えていくとよいだろう。慣れれば簡単なMarkdownテキストでスタイリッシュなスライドを作成できる。プレビュー版ではあるがWebアプリ（web.marp.app）もあるので、ここで「Marp」のMarkdown記法を試してみてもよいだろう。iPadやChromebookからでも利用できる。

プレビュー版のWebアプリ

　作成したスライドは、タブバーにある「Marp」コマンドのクイックピックボタンからエクスポートできる。初期設定ではPDF形式となっているが、「PowerPoint」形式を選ぶことも可能。先頭のスライドだけをJPEG/PNG形式の画像ファイルにすることもできるので、スライドのサムネイルが欲しいときは利用するとよいだろう。

作成したスライドは、タブバーにある「Marp」コマンドのクイックピックボタンからエクスポートできる

「PowerPoint」形式で出力することも可能

　そのほかにも、「Visual Studio Code」の［ファイル］－［アウトライン］ビューでスライドの概要を表示したり、改ページ（---）へマウスホバーさせると現れる矢印でページを開閉することも可能。［Ctrl］＋［Space］キーでディレクティブの「IntelliSense」入力補完を行ったり、ディレクティブへのマウスホバーでポップアップヘルプを参照できるので、ディレクティブを使いこなしたい場合は役立てたい。

アウトラインとページの開閉機能

［Ctrl］＋［Space］キーでディレクティブの「IntelliSense」入力補完

ディレクティブへのマウスホバーでポップアップヘルプを参照