Markdown で発表資料を作ってみた

※当記事は2023年12月に執筆した記事で、情報は当時のものになります。

はじめに

突然ですがみなさん発表資料って何で作っていますか？
Microsoft PowerPointやGoogle Slidesを使う人が多いのかなと思います。
自分も基本的にはこれらのツールを使って発表資料を作ってきました。
ただエンジニアとして働く中で、Markdown でメモを取ったりドキュメントを作成することが増えてきて、発表資料も Markdown で書いてみたいなと。
そこで弊社で開催されているLT会に参加するにあたり、Markdown を使って発表資料を作ってみました。

調べてみると色々なツールで実現できるのですが、今回は VS Code の拡張機能を入れるだけでサクッと使えるようになる Marp を紹介します。

Marpとは

Create beautiful slide decks using an intuitive Markdown experience

https://marp.app/

ということでMarkdownで美しいスライドが作れるものだそうです。
Markdownから変換する対象としては、PDF、HTML、PPTXなど様々な形式をサポートしてるとのこと。

詳しい使い方は下記を参照してください。

メリット

使ってみてMarkdownファイルでスライドが作成できるメリットはいくつかあると思いました。

• 補完や整形がしやすい
• 好きなテキストエディタで編集可能
• Gitで管理可能
• 普段作成しているメモをそのまま良い感じのスライドに

デメリット

逆にデメリットとしてはデザイン面で少しやりづらさを感じました。
CSSによりテーマの作成や、柔軟なデザインを実現出来ますが、自分はあまり得意では無いので…

Marp for VS Code を使ってみる

VS Code の拡張機能として Marp for VS Code が提供されています。
ここでは自己紹介用の資料を作成し、大まかな流れを紹介します。

Markdown ファイルを作成する

まず最初に VS Code で slide.md のようなファイルを作成します。
この際、Marp を利用するには Markdown ファイルの先頭に下記を入力しておきます。
headingDivider: 1 を指定することで、Markdown の見出しである # ごとにページを分けることが出来ます。

---
marp: true
theme: default
headingDivider: 1
---

Copy

スライド本文を記載する

見出しや箇条書きは Markdown 記法をそのまま利用できます。
画像を載せる際は下記の記法を元に記載します。

---
marp: true
theme: default
headingDivider: 1
---

# 名前
- ykatsuno
![right bg 80%](icon.png)

# 出身地
- 滋賀県出身です！
- ここ数年で引っ越しが結構ありました
    - 滋賀 → 兵庫 → 千葉 → 神奈川 → 千葉 → 京都

# 趣味・特技
## マイブーム
- デスク周りを良い感じにするのにハマってます🖥
![right bg 90%](desk.jpeg)


## 特技
- 高校から大学までドラムをやってました 🥁

Copy

プレビューを見る

普段 VS Code で Markdown のプレビューを見るのと同様の手順でスライドも確認できます。
プレビューアイコンをクリックするか、ショートカットキーを入力します。
（Mac の場合は「Cmd+K, V」, Windows の場合は「Ctrl+K, V」）

良い感じにスライドが出来ていますね！

エクスポートする

最後に作成したスライドをエクスポートしてみます。
プレビューアイコンの横にあるMarpアイコンをクリックするか、コマンドパレットを開いたのち、
Export Slide Deck...を選択することで任意のフォーマットでエクスポートができます。
（Mac の場合は「Cmd+Shit+P」, Windows の場合は「Ctrl+Shift+P」でコマンドパレットを開けます）

フォーマットとしては

• PDF
• HTML
• PowerPoint
• PNG (最初のスライドのみ)
• JPEG (最初のスライドのみ)

が選べるようです。

おわりに

今回初めて Markdown から発表資料を作ってみましたが、思ったよりサクッと作ることができました。
使い方によっては生成AIに Marp に対応した Markdown を出力させることで、資料作成の効率化も出来るはず。
普段 Markdown を書いている人は一度触ってみるのもオススメです。