マークダウンでスライドを作ろう！

LT 会 - マークダウンでスライドを作ろう！ マークダウンでスライドを作ろう！ Mikuto0831 - LinuxClub 2025/11/28 1

LT 会 - マークダウンでスライドを作ろう！ 目次 なぜマークダウンでスライドを作るのか 2. Marpという神ツール 3. デザインに個性を出そう 4. pdf/pptxに出力しよう 1. 2025/11/28 2

LT 会 - マークダウンでスライドを作ろう！ 1. 2025/11/28 なぜマークダウンでスライドを作るか 3

LT 会 - マークダウンでスライドを作ろう！ 1. なぜマークダウンでスライドを作るか 生成AIと相性がいい VSCodeで書ける 書いていた記事から流用しやすい バージョン管理しやすい デザインが統一しやすい など 2025/11/28 4

LT 会 - マークダウンでスライドを作ろう！ という神ツール 2. Marp 2025/11/28 5

LT 会 - マークダウンでスライドを作ろう！ という神ツール - どんなものか 2. Marp は Markdownプレゼンテーションエコシステム Yuki Hattori (@y_hatt) によってつくられた Marpit と CommonMark の書式が基本 覚えるコストは低め Marp 2025/11/28 6

• https://marp.app/
• https://marpit.marp.app/
• https://commonmark.org/

LT 会 - マークダウンでスライドを作ろう！ という神ツール - 使い方1 2. Marp Marp for VS Code 2025/11/28 で使用する(オススメ) 7

• https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode

LT 会 - マークダウンでスライドを作ろう！ という神ツール - 使い方2 2. Marp 後はマークダウンファイルを作って書き込んでいきましょう！ --marp: true <!-- ←こいつがないとmarpと認識しない> --# ここにタイトルを記入 --↑区切り線でページ区切りができる 2025/11/28 8

LT 会 - マークダウンでスライドを作ろう！ という神ツール - 使い方2 2. Marp さっきのをスライドにすると↓ 2025/11/28 9

LT 会 - マークダウンでスライドを作ろう！ という神ツール - 使い方2 2. Marp デフォルトのデザインだと物足りないですよね 2025/11/28 10

LT 会 - マークダウンでスライドを作ろう！ 3. 2025/11/28 デザインに個性を出そう 11

LT 会 - マークダウンでスライドを作ろう！ 3. デザインに個性を出そう - 標準でできること にあるものを抜粋 paginate: 設定するとページ番号を表示できる header/footer: それぞれに表示する文字列を設定できる Marpit Markdown > Directives 2025/11/28 12

• https://marpit.marp.app/directives

LT

会 - マークダウンでスライドを作ろう！

3.

デザインに個性を出そう - 標準でできること

このスライドの設定
--marp: true
header: "LT会 - マークダウンでスライドを作ろう！"
footer: "2025/11/28"
paginate: true
theme: mikuto <!-- ここは後で触れる -->
---

2025/11/28

13

LT 会 - マークダウンでスライドを作ろう！ 3. デザインに個性を出そう - テーマをいじる テーマはCSSを使えば自在にいじれる 2025/11/28 14

LT 会 - マークダウンでスライドを作ろう！ 3. デザインに個性を出そう - テーマをいじる準備 ディレクトリ構成 . ├── .vscode │ └── settings.json ├── marp_themes │ └── mikuto.css └── md-slide └── md-slide.md 2025/11/28 15

LT 会 - マークダウンでスライドを作ろう！ 3. デザインに個性を出そう - テーマをいじる準備 settings.json { } 2025/11/28 に使用するcssを定義 "markdown.marp.themes": [ "./marp_themes/mikuto.css" ] 16

LT 会 - マークダウンでスライドを作ろう！ 3. デザインに個性を出そう - テーマをいじる準備 テーマ名の設定と、default設定のimport /* @theme mikuto */ @import 'default'; 2025/11/28 17

LT 会 - マークダウンでスライドを作ろう！ 3. デザインに個性を出そう - テーマをいじる準備 あとはCSSを改造するだけ github: mikuto.css 使いたいスライドページに <!-- _class: hoge --> を追加しよう 2025/11/28 18

• https://github.com/Mikuto0831/LTkai/blob/main/marp_themes/mikuto.css

LT 会 - マークダウンでスライドを作ろう！ に出力しよう 4. pdf/pptx 2025/11/28 19

LT 会 - マークダウンでスライドを作ろう！ に出力しよう - VScode拡張機能を使う 4. pdf/pptx 1. アイコンを選択 を選択 3. explorerで任意の拡張子を選択し出力 2. Export slide Deck... 2025/11/28 20

LT 会 - マークダウンでスライドを作ろう！ に出力しよう - marp-cliを使う 4. pdf/pptx の場合 pdf $ npx marp md-slide.md \ --pdf --allow-local-files \ --theme ../marp_themes/mikuto.css -o dist/output.pdf の場合 pptx $ npx marp md-slide.md \ --pptx --allow-local-files \ --theme ../marp_themes/mikuto.css -o dist/output.pptx 2025/11/28 21

LT 会 - マークダウンでスライドを作ろう！ に出力しよう - marp-cliを使う 4. pdf/pptx 1 つひっかけがあり オプションを付けないと 編集できないpptxができる 尚、別途 LibreOffice が必要 --pptx-editable 2025/11/28 22

LT 会 - マークダウンでスライドを作ろう！ 終わりに 2025/11/28 23

LT 会 - マークダウンでスライドを作ろう！ みんなもマークダウンで快適にスライドを作ろう！ 2025/11/28 24