【Marp】Markdownからスライドを作成した
対象読者: VS CodeとMarkdownについて知っている
概要
司会: ここにあるのは、Markdownドキュメント!
司会: みんなには、今から5分でこれらのMarkdownを全てスライドに変換してもらう。
司会: スライドはPDF形式にするように。
石田: えぇ!! 5分で!! ヤバいぞこれ。
ボブ: よしっ、Marpを使うか...
環境
ボブ: この記事では Marp for VS Code 3.0.0 を使ってるよ。
Marpとは
ボブ: MarpはMarkdownファイルをスライドにするツールだ。こんな感じ。
---
marp: true
---
# Marpってすごい
---
## Markdownが
# **スライド**に
---
めっちゃ**簡単**
これが
こうなる
ボブ: このようにMarpでは---を使用してページを区切る。
環境構築
司会: では、Markdownファイルを送信する。これだ。
# 日本語の挨拶
## こんにちは
昼に使う
## おはようございます
朝に使う
### おはよう
親しい人に使う
## こんばんは
夜に使う
矢野: うわっ、どうしよう...PowerPointに打ち込んでいくか...
石田: いや、俺はGoogleスライドを使う...
ボブ: よし、ではまずは環境構築から。まずはVS CodeにMarp for VS Code拡張機能を導入。
ボブ: するとMarkdownファイルを開いたとき、右上の三角形2つのMarpのボタンが表示されるようになる。
Marpを使う
司会: 2分経過したぞ。あと残りは3分。
石田: うわっ! Googleドライブがいっぱいでスライドが作れない。整理しなきゃ...
ボブ: まずは右上のMarpのボタンをクリックしてToggle Marp Feature For Current Markdown(現在のMarkdownのMarp機能を切り替える)を選択。
ボブ: すると、Markdownファイルの先頭にmarp: trueが追加される。こんな感じ:
---
marp: true
---
# 日本語の挨拶
...
ボブ: そして右上のプレビューボタンをクリックすると、
ボブ: スライド1ページにMarkdownの内容が表示されている。
ボブ: このように---を追加していってスライドをページに区切ってもいいが、
---
marp: true
---
# 日本語の挨拶
---
## こんにちは
昼に使う
---
## おはようございます
朝に使う
### おはよう
親しい人に使う
---
## こんばんは
夜に使う
ボブ: 今は時間がないのでheadingDividerを使う。
ボブ: このようにMarkdownに<!-- headingDivider: 2 -->を追加してみよう。
---
marp: true
---
<!-- headingDivider: 2 -->
# 日本語の挨拶
## こんにちは
昼に使う
## おはようございます
朝に使う
### おはよう
親しい人に使う
## こんばんは
夜に使う
ボブ: するとこんな感じに#見出しと##見出しでスライドが区切ることができる。
デザインを整える
司会: ここで一つ、条件を加えようと思う。
司会: デザインが綺麗であることだ。デザインがダサいと減点になる。
矢野: えー、綺麗なデザイン!? PowerPointで頑張るかぁ。
司会: おっと、ここで4分経過だ! 残り1分でデザインを綺麗にできるかな?
ボブ: よしっ、次はスライドのデザインを変えてみよう。
ボブ: スライドのテーマは3種類から選ぶことができる。default（何も設定しないとこうなる）、gaia、uncoverだ。試しにスライドのテーマをuncoverに変えてみよう。
ボブ: <!-- theme: uncover -->をこのように追加してみよう。
---
marp: true
---
<!-- headingDivider: 2 -->
<!-- theme: uncover -->
# 日本語の挨拶
...
ボブ: 筆者はこのデザインが好きだ。
PDFにエクスポートする
司会: あと30秒だ!急いだほうがいいかも。
石田: まだGoogleスライドに入力中だ! 間に合うかな...
ボブ: 右上のMarpのボタンをクリックして
ボブ: Export Slide Deck ...(スライドデッキをエクスポート)を選択。
ボブ: あとはPDFファイルとして保存したらOK。
司会: 5、4、3、2、1、終了! このチャレンジにクリアしたのは...ボブさん!
最後に
スライドを作るならMarp
Discussion