Markdownからスライド資料を作成できる『Marp』を試してみる

こんにちは。3回目の登場です。エンジニアのuchimuroです。

今回はタイトルの通り、マークダウン形式のファイルから簡単にスライド資料を作成できる『Marp（Marp for VS Code）』というVS Codeのプラグインを試してみるという内容です。

はじめに

今回は前述の通り、マークダウンファイルを取り扱うことになるのですが、マークダウンの書き方については記事内では触れておりませんので、予めご了承ください。
書き方に不安があるという方は、事前に学習してから読み進めていただければと思います。

『Marp（Marp for VS Code）』の良いところ

それでは最後に『Marp』の利点に触れてから、本題に移っていきます。

• デザインツールやパワーポイントの使用に慣れていない人でも、マークダウンを書くことができれば、一定のクオリティのスライドを作成できる。
• マークダウン記法に慣れていれば、スピーディーにスライドを作成できるので、急にスライドが必要になった場面で役に立つ。
• cssを用いることでオリジナルのデザインを適用することができる。
• VS Codeのショートカットキーをフルに活用して、スライドを作成できる。

準備するもの

• VS Code
• Marp for VS Code（VS Codeの拡張機能）

「Marp for VS Code」という拡張機能をVS Codeにインストールするだけで準備完了です。とても簡単ですね。
ちなみに今回の方法では黒い画面でコマンドを打つ必要はありません。

※CLIから操作できる「Marp CLI」もありますが、今回の内容では割愛させていただきます。

実際に試してみる

今回はスライドを3パターン作成していこうと思います。

その①

それでは早速進めていきます。
まずはこの内容でblog01.mdというファイルを作成しました。

---
marp: true
---

# タイトル

---

# 目次

- 内容1
    - コンテンツ1
    - コンテンツ2

---

# 内容1

## コンテンツ1

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

---

# 内容1

## コンテンツ2

| table1 | table2 | table3 |
|--------|--------|--------|
| table1 | table2 | table3 |
| table1 | table2 | table3 |
| table1 | table2 | table3 |

※冒頭に以下のように記述することで、そのファイルで『Marp』を有効化することができます。

---
marp: true
---

※スライドを分ける際は、区切りたい部分で以下のように記述します。

---

このファイルをVS Codeでプレビューするとこのように表示されます。
通常のマークダウンファイルのプレビューとは異なり、スライド形式の表示になっていることがわかるかと思います。

この状態でプレビューボタンの右隣にある『Marp』ロゴのボタン（画像内で赤色にハイライトしている部分）をクリック後に表示される「Export Slide Deck」を選択すると、拡張子を指定してファイルを保存することができます。

こちらが今回blog01.mdから作成したPDFファイルです。

その②

「その①」で最低限のPDFを作成することができましたが、かなりシンプルなので、もう少しスライド資料感を出したいですね…。
ということで、今度はよりデザイン性のあるスライドを作成してみましょう。

この内容でblog02.mdというファイルを作成しました。

---
marp: true
theme: gaia
header: "evoworx"
footer: "blog"
paginate: true
---
<!-- headingDivider: 1 -->

# タイトル

# 目次

- 内容1
    - コンテンツ1
    - コンテンツ2

# 内容1

## コンテンツ1

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

# 内容1

## コンテンツ2

| table1 | table2 | table3 |
|--------|--------|--------|
| table1 | table2 | table3 |
| table1 | table2 | table3 |
| table1 | table2 | table3 |

※「その①」と比較すると冒頭部分の記述が増えています。この部分ではそれぞれ以下の設定をしています。

---
marp: true
theme: gaia               // テーマ設定：デフォルトでは「default, gaia, uncover」の3種類。外部CSSから自作テーマを作成することも可能。
header: "evoworx"   // ヘッダー設定：全ページ共通でヘッダーに表示するテキストを設定できる。
footer: "blog"           // フッター設定：全ページ共通でフッターに表示するテキストを設定できる。
paginate: true           // ページ番号設定：全ページに連番でページ番号を付与できる。
---

※「その①」で記述のあったスライドを分けるための---を削除し、代わりに以下の記述を追加しました。このように記述すると#（h1）の部分で自動的にスライドを分けることができます。

<!-- headingDivider: 1 -->

blog02.mdを先ほどと同様の手順でPDFにしたものがこちらになります。

Blog02 from evoworxuchimuro

コンテンツの内容自体に変化はありませんが、ヘッダー・フッター・ページ番号などが追加されたことにより、先ほどよりもザ・スライド資料という感じの見た目になりましたね。
テーマを設定したことによって、レイアウトや色味も良い感じに調整されています。

その③

ただここまで来たら、ある程度自分の好きなようにレイアウトや色味をカスタマイズしたいですよね…。
ということで、この内容でblog03.mdというファイルを作成しました。

---
marp: true
theme: gaia
style: |
  section {
    background-color: #caf7c1;
    color: #000;
  }

  footer {
      color: #000;
      font-size: 18px;
      text-align: center;
  }

  section.front h1 {
      border-bottom: none;
      font-size: 80px;
      left: 0;
      position: absolute;
      text-align: center;
      top: 50%;
      transform: translateY(-50%);
  }

  h1 {
      border-bottom: 2px solid #000;
      font-size: 50px;
      margin-bottom: 50px;
      padding-bottom: 10px;
      width: 100%;
  }

  h2 {
      background: #000;
      color: #fff;
      display: inline-block;
      font-size: 30px;
      padding: 10px 20px;
  }

  p {
      font-size: 30px;
      line-height: 1.5;
  }

  ul {
      list-style: square;
  }

  table {
      background: none;
      font-size: 25px;
      text-align: center;
      width: 100%;
  }

  table thead th {
      background: #53e036;
      color: #000;
      padding: 15px;
  }

  table td {
      padding: 10px;
  }
---
<!-- _class: front -->

![bg cover blur](./bg.jpg)

# タイトル

---
<!-- footer: "evoworx" -->

# 目次

- 内容1
    - コンテンツ1
    - コンテンツ2

---

# 内容1

## コンテンツ1

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

---

# 内容1

## コンテンツ2

| table1 | table2 | table3 |
|--------|--------|--------|
| table1 | table2 | table3 |
| table1 | table2 | table3 |
| table1 | table2 | table3 |

※「その②」と同様のテーマを設定していますが、今回はその後にcssを記述しています。これによって設定したテーマのスタイルが上書きされ、オリジナルのデザインを作成することができます。

---
marp: true
theme: gaia
style: |
  section {
    background-color: #caf7c1;
    color: #000;
  }

  <!-- 中略 -->

  table td {
      padding: 10px;
  }
---

※以下の部分の記述では背景画像を設定しています。さらにスライド全体を覆いつつ、ブラーがかかった表示となるような設定も追加しました。画像に対して他にどのような設定が指定できるかはこちらをご覧ください。

![bg cover blur](./bg.jpg)

※以下のように記述すると、section（スライド）に任意のclass名を付与することができます。また、先頭にアンダースコアを記述することにより、この記述があるスライド部分のみに設定が反映されます。

<!-- _class: front -->

※以下の部分の記述は上記とは異なり、先頭にアンダースコアの記述がありません。その場合はこの記述があるスライドも含め、以降の全てのスライドに同様の設定が反映されます。ですので、今回は1枚目以外の全てのスライドにフッターが表示されます。

<!-- footer: "evoworx" -->

blog03.mdを先ほどと同様の手順でPDFにしたものがこちらになります。

Blog03 from evoworxuchimuro

「その②」の段階でも大分仕上がった印象ではありましたが、諸々をカスタマイズしたことにより、デザインツールで作成したスライドに見劣りしないものになったのではないでしょうか。

おわりに

駆け足にはなりましたが、今回は『Marp』というVS Codeのプラグインを試してみました。

今回紹介できなかった記法や機能は沢山ありますので、興味をもってくださった方はこちらのドキュメントを確認してみてください。

それでは今回はここらへんで失礼します。

参考

• https://marp.app/
• https://marpit.marp.app/
• https://www.nekohita.tokyo/2020/03/13/tips/marp-for-vscode/
• https://qiita.com/tomo_makes/items/aafae4021986553ae1d8