レビュー
Visual Studio Code+Markdownでキレイなプレゼンスライドを手軽に作成できる「Marp」
Markdownに慣れているのならばちょっとした拡張記法を覚えるだけ
2022年7月4日 17:08
「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」の[ファイル]-[新しいファイル]メニューから新規ファイルを作成しよう。「Marp Markdown」という項目をクリックすると、以下のようなMarkdownドキュメントが作成される。
---
marp: true
---
「Marp」のMarkdown記法は、「CommonMark」を拡張したものとなっている。違いはページを分割するために「---」が用いられること、ディレクティブと拡張構文という仕組みが導入されていることだ。
「ディレクティブ」はスライドのテーマ、ヘッダー、フッター、スタイルなどを指定するための仕組み。先ほどの新規ドキュメントの先頭に挿入されていたものがそれで、「---」で囲ってドキュメントの先頭に配置する(YAML Front Matter)。また、HTMLコメントとして記述し、そのページの背景色を指定したりすることも可能。
試しに以下のような「Marp」のMarkdownドキュメントを作成し、タブバー右端のプレビューボタンを押してみよう。
---
marp: true
theme: gaia
footer: "**madonomori**"
---
1枚目のスライド
---
2枚目のスライド
---
3枚目のスライド
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からでも利用できる。
作成したスライドは、タブバーにある「Marp」コマンドのクイックピックボタンからエクスポートできる。初期設定ではPDF形式となっているが、「PowerPoint」形式を選ぶことも可能。先頭のスライドだけをJPEG/PNG形式の画像ファイルにすることもできるので、スライドのサムネイルが欲しいときは利用するとよいだろう。
そのほかにも、「Visual Studio Code」の[ファイル]-[アウトライン]ビューでスライドの概要を表示したり、改ページ(---)へマウスホバーさせると現れる矢印でページを開閉することも可能。[Ctrl]+[Space]キーでディレクティブの「IntelliSense」入力補完を行ったり、ディレクティブへのマウスホバーでポップアップヘルプを参照できるので、ディレクティブを使いこなしたい場合は役立てたい。
ソフトウェア情報
- 「Marp for VS Code」
- 【著作権者】
- Marp team
- 【対応OS】
- (編集部にてWindows 11で動作確認)
- 【ソフト種別】
- フリーソフト
- 【バージョン】
- 2.1.0(22/6/10)