Marpで発表スライドを作ろう

はじめに

スライドの作成ツールにはgoogleスライドやパワーポイント、canvaなど様々あると思います。
そんな中で今回はmarkdown形式のファイルからスライドを生成できるMarpというサービスを紹介したいと思います。
Marpを利用することでファイルをGitHubやGitLabなどのGitホスティングサービス上で管理したり、VSCodeの拡張機能を利用することでVSCode上でスライドを動かすことができます。

Marpとは

MarpとはMarkdown Presentation Ecosystemとも呼ばれ、Markdownドキュメントを記述することでスライドに変換できるツールです。

Marpを利用してスライドを作ってみる

以下の２ステップでMarpに対応させることができます

1. VSCodeの拡張機能をインストールする

2. mdファイルの先頭に以下の記載をする

---
marp: true
---

カスタマイズする

指定を追加することでスライドをカスタマイズすることもできます

テーマの変更

mdファイル内に以下の記載を追加することでテーマを変更することができます。

---
marp: true
theme: 
---

以下の記事でテーマについて紹介していただいています。

ページ番号の追加

mdファイル内に以下の記載を追加することでページ番号を追加することができます。

---
marp: true
paginate: true
---

カスタマイズする

自分でcssを使用してカスタマイズすることもできます。

mdファイル内に直接記述するパターン

style: |
  section {
    background-color: gray;
    font-size: 40px;
  }

cssファイルに記述するパターン

vscode のsettings.jsonに利用するテーマを定義したファイルを記述することで、自身で作成したcssファイルを適用することができます。

/.vscode/settings.json
/themes/xxx.css
xxx.md

所感

• 軽い資料を作成するときはすごく便利
• gitで管理できる
• 凝った資料を作るのは大変

以下にサンプルを用意したのでぜひご覧ください

参考