Marp

概要

MarpはMarkdown形式でスライドを記述し、HTML/PDF/PPTXなどに変換できるツール。

本プロジェクトでの特徴：

• MkDocsのページとしてWeb上で閲覧可能
• PDF出力はMkDocsのto-pdfプラグインで統合的に行う
• スライド単体のPDF出力も可能

基本構文

スライドの区切り

スライドは---（水平線）で区切る。

# スライド1

最初のスライドの内容

---

# スライド2

2枚目のスライドの内容

フロントマター

スライドの先頭にフロントマターを記述して設定を行う。

---
marp: true
theme: default
paginate: true
header: 'ヘッダーテキスト'
footer: 'フッターテキスト'
---

主な設定項目：

スタイリング

ディレクティブ

スライドごとにスタイルを変更できる。

---

<!-- _class: lead -->
# タイトルスライド

中央寄せのリードスライド

---

<!-- _backgroundColor: #123 -->
<!-- _color: white -->
# 背景色を変更

このスライドは背景が暗い

---

画像の配置

![width:300px](../assets/images/my-diagram.drawio.svg)

<!-- 背景画像として使用 -->
![bg right:40%](../assets/images/background.png)

画像の指定方法：

• width:300px - 幅を指定
• height:200px - 高さを指定
• bg - 背景画像として使用
• bg right:40% - 右側40%に背景画像

VS Code拡張

Marp for VS Code拡張を使用すると、エディター内でプレビューを確認できる。

1. VS Codeを開く
2. 拡張機能で「Marp for VS Code」を検索
3. インストール

PDF出力

MkDocs統合でのPDF

MkDocsサイト全体をPDF化する場合は、to-pdfプラグインを使用する。

MKDOCS_PDF=1 uv run mkdocs build

スライド単体のPDF

Marp CLIを使用してスライド単体をPDF化できる。

# Marp CLIのインストール
npm install -g @marp-team/marp-cli

# PDFに変換
marp slides.md --pdf

HTMLに変換

marp slides.md --html

参考リンク

• Marp公式サイト
• Marp for VS Code
• Marpit Markdown