marp

date: 2025-05-24 excerpt: marpの使い方

marpの使い方

概要

marpはMarkdownを使ってスライドを作成するためのツール
CSSをいじることでスライドのデザインを変更できる
pdf化を使用する場合はchromiumが必要

CLIツールのインストール

macOS

$ brew install marp-cli

Linux

$ bun install -g @marp-team/marp-cli

変換コマンド

外部画像やCSSを参照する場合は、--allow-local-files オプションを付ける必要がある

html

$ marp input.md --html --allow-local-files -o output.html

pdf

$ marp input.md --pdf --allow-local-files -o output.pdf

マークダウンの書式の例

---
marp: true
theme: default
paginate: true
size: 16:9
backgroundColor: '#ffffff'
---

<!-- スライド1: タイトル -->
# Marp CLI サンプル

---

<!-- スライド2: 箇条書き -->
## 特長

- Markdown だけでスライドが作れる
- テーマやページ番号を簡単設定
- コードハイライト対応

---

# シンプル埋め込み

以下のように画像を挿入できます:

![Sample Image](https://picsum.photos/id/1059/400/300)

---

## インラインでの画像挿入

これはインラインで画像を挿入した例です。 ![小さなアイコン](https://placehold.jp/50x50.png?text=Icon) テキストと並べてアイコンなどを表示するのに便利です。

---

![bg blur](https://picsum.photos/id/1025/1200/800)

# 背景オーバーレイ
 - bgで背景全体に画像を敷き、その上に見出しを表示する例です。
 - blurで画像をぼかす

---

![bg left:50%](https://picsum.photos/seed/picsum/200/300)

# 画像を左半分に配置
 - テキストは残り左半分に記される

---

# 2カラムレイアウト

<div style="display: flex; align-items: center;">
  <img src="https://picsum.photos/id/1011/600/400" alt="Sample Photo" width="50%">
  <div style="padding-left: 1em;">
    こちらは画像とテキストの2カラムレイアウト例です。
  </div>
</div>

---

# テキスト内での画像フロート

ここは本文の先頭です。
<img src="https://picsum.photos/id/1035/200/200" alt="Diagram" style="float: right; width: 30%; margin-left: 1em;">
図を右寄せし、テキストが左側に回り込みます。