Markdownのスライド作成：Marp
１．概要
Markdown形式でスライド（プレゼンテーション）資料を作成するオープンソースソフトウェアであるMarp(Markdown Presentation Ecosystem)を紹介します。
１－１．Markdownとは
Markdownは、プレーンテキストのテキスト文書にフォーマット要素を追加するために使用できる軽量のマークアップ言語です。2004年にジョン・グルーバーによって作成されたMarkdownは、今や世界で最も人気のあるマークアップ言語の1つです。
１－２．Marpの概要
Marp(Markdown Presentation Ecosystem)はMardownからスライドを作成する機能を含むエコシステムであり、日本人の服部雄輝さんが開発されました。
多くの機能を含み、詳細は「the awesome list of Marp」の通りです。
Marp - The entrance website of Marp ecosystem.
GitHub - The GitHub repository of Marp website.
GitHub Discussions - The discussion forum about Marp ecosystem.
Marpit framework - The skinny framework to create slides from Markdown.
GitHub - The GitHub repository of Marpit framework.
Marpit API - The API reference of Marpit framework.
Marp Core - The core library of Marp, based on Marpit framework.
Marp CLI - A CLI interface for Marp and Marpit-based converters.
Marp for VS Code - An extension of Marp for Visual Studio Code.
仲でもMarpitはMarpのMarkdownエンジン部分となります。
１－３．Marpの機能
機能としては下記の通りです。
マークダウン記法（CommonMark準拠）したスライド作成
拡張機能で画像・数式・自動拡大なども利用可
LaTeX記法をサポートしており、数式表示もできる
Directivesや構文規則(syntax)のサポート
ビルドインテーマやCSS：既定テーマ（default, gaia, uncover）で美しくプレゼンでき、独自CSSで見た目を細かく調整可能
出力機能：編集後はHTML、PDF、PowerPoint（PPTX）等にエクスポート可
公式ツールの提供：Marpエコシステムは多くのツールセットがある
Pluggable architecture：
完全なオープンソース：MITライセンス
２．環境構築
Marpの使用方法は何種類か用意されています。
Marp for VS Code：VS Codeの拡張機能
Marp CLI：CLI（コマンドラインツール）で使用
Marp Core：コアエンジンを使用した公式のMarpツール
Marpit framework：Marpit (independented from Marp)はMarkdownとCSSをHTML/CSSで構成されたスライドに変換
２－１．Marp for VS Code
事前にVS Codeはインストールしておきます。
VS Codeの拡張機能(Ctrl+Shift+x)で「Marp for VS Code」をインストールします。これだけで準備は完了です。
２－２．任意設定：pptxファイルの編集(α版)
初期設定ではmarpで出力したPowerPointファイルは編集できません。編集可能なファイルを作成する場合は下記が必要です。
※2025年5月現在では試験段階機能のため、データの欠損リスクがあります
LibreOfficeのインストール
VS Codeの設定変更
【LibreOfficeのインストール】
編集可能なpptx出力にはLibreOfficeImpressが必要です。そのため事前にLibreOfficeをインストールします。
【VS Codeの設定変更】
設定(Ctrl+,)から”marp editable”と入力すると「Markdown › Marp › Pptx: Editable」があるので"on"か”smart”に変更します。
参考として（後述する）marpとして認識されたファイルであれば出力用ボタンの「Open Extension Settings」から探すことも可能です。
３．Quickstart
「Marp for VS Code」とその他記事を参照しながら、VS Codeでmarpを触ってみます。
３－１．ファイル作成
Marpでファイルを作成する場合、Markdown形式のファイル(拡張子md)の頭に"marp: true"のヘッダーを記載することでMarpが使用できます。
コマンドパレット(Ctrl+Shift+P)から”marp:”と打てば、"marp: true"が記載済みのファイルが作成されます。
[test.md]
---
marp: true
---marpで認識されると下記機能が使用可能です。
プレビュー画面：資料の状態を別画面で確認
出力機能：スライドとしてファイルを出力
プレビューでは①Markdown形式※、②スライド形式の２パターンで確認できます。イメージは下図の通りです。
※こちらはMarpの機能ではなくQuatroの影響かもしれません。
３－２．ディレクティブ設定
Marp にはテーマやページ番号、ヘッダー、フッターなどのスライド要素を制御するための 「ディレクティブ（Directives）」 と呼ばれる拡張構文があり、下記２つがあります。
グローバルディレクティブ：スライド全体に影響する設定
ローカルディレクティブ：1 枚のスライドだけに適用される設定
基本的に設定後は後段のページに適用される
Spot directives：接頭辞として"_"をつけると1ページのみとなる
３－２－１．Global directives
全ページに適用されるグローバルディレクティブを追加していきます。
theme：設定すると背景色が変更されます
gaiaはクリーム色っぽい感じ
size：スライドのサイズ指定
指定しなくても問題なし
「16:9(1280x720)」と「4:3(1024x768)」の２つから選択
math：数式のレンダーを設定
headingDivider：指定された見出しレベルの前にスライドページを分割するように指示
＜メタデータ＞
title：タイトル
author：作成者
description：サブタイトル
[test.md]
---
marp: true
theme: gaia
size: 16:9
math: katex
title: タイトル(Global)
author: KIYO(Global)
description: 説明(Global)
---
PDF化してプロパティを確認するとファイルのメタデータとして追加した内容が確認できました。
３－２－２．Local directives
指定したページに適用されローカルディレクティブを追加します。次のスライドに明示的な設定が無い限り前のスライドから継承されます。ただし接頭辞に"_"をつけることで指定ページのみに適用することが可能です。記法は下記のとおりです。
【記法】
最初の水平線---に記載：
最初に記載するため全ページに指定可能
<!-- <directive>: <値>-->：
指定ページにピンポイントで記載しやすい
【Local Directives一覧】
paginate: trueに設定してページネーションを表示
header: ヘッダーのコンテンツを指定
footer:フッターのコンテンツを指定
class: 現在のスライドにHTMLクラスを設定
color:テキストの色を設定
backgroundColor: 背景色を設定
記法を変えて何個か記載してみました。ページ番号やヘッダー／フッターの追加が確認できました。
文字色は赤色に変更しておりますが、次で確認します。
[test.md]
---
marp: true
theme: gaia
size: 16:9
math: katex
title: タイトル(Global)
author: KIYO(Global)
description: 説明(Global)
#ローカルディレクティブ
paginate: true
color: #ff0000
---
<!--
footer: フッター
header: ヘッダー
-->
３－３．テキストの追加
記法はマークダウン記法（CommonMark準拠）のため、Markdownを参照します。下記参照しながら見出し、リンク、箇条書き、番号付き箇条書きを記載してみました。
テキストが確認できました。またローカルディレクティブで指定した赤色も確認できました。
[test.md]
---
marp: true
theme: gaia
size: 16:9
math: katex
title: タイトル(Global)
author: KIYO(Global)
description: 説明(Global)
#ローカルディレクティブ
paginate: true
color: #ff0000
---
<!--
footer: フッター
header: ヘッダー
-->
# 見出し1
## 見出し2
### 見出し3
通常のテキスト
[作成ノート(+予定)一覧 by KIYO](https://note.com/kiyo_ai_note/n/nd49cc7237ceb)
* 箇条書き1
* 箇条書き2
1. 番号付きリスト1
2. 番号付きリスト2
３－４．ページ追加(改行)
ページ追加は「水平線---」を追加するだけです。練習として下記追加しました。
spot directives：このページだけ背景を白に変更
数式：TeX/LaTeXで数式記載
$：インライン表示
$$：ブロック表示
画像：Markdownで画像を追加
[test.md]
～省略（同上）～
---
<!--
_backgroundColor: #fff
-->
$$
f(x) = \frac{1}{\sqrt{2\pi\sigma^2}} e^{-\frac{(x-\mu)^2}{2\sigma^2}}
$$
３－５．他の機能を試す
簡単に追加できる物も試してみます。なおほとんどがMarpの機能ではなくMarkdown記法に準じているだけです。
見出しを１行に収める
画像の位置・サイズ変更
コードブロック：`(バッククォート)を追加
これはMarp記法ではなくMarkdownの記法
絵文字追加
[test.md]
～省略（同上）～
---
<!-- 見出しを行に収める -->
## あああああああああああ
## <!--fit--> ああああああああああああああああああ
<!-- コードブロック -->
(`---`) (`test`)
<!-- 絵文字 -->
:satisfied: :smile: :angry: :scream: :dog: :cat: :pig: :monkey_face: :tiger: :bear: :koala: :penguin: :frog: :octopus: :fish: :whale2: :snail: :turtle:
<!-- 画像を右寄せし、サイズを指定 -->
```
# Slide 1
$$
f(x) = \frac{1}{\sqrt{2\pi\sigma^2}} e^{-\frac{(x-\mu)^2}{2\sigma^2}}
$$
---
# Slide 2
文字も書ける
```
３－６．出力
出力ボタンを押し「Export Slide Deck」を選択すると名前を付けて保存できます。PDFを選択するとスライドがPDFで出力されました。
結果は下記の通りです。
４．ガイド
詳細な使用方法を学習していきます。内容はMarp-GitHubのGuideを参照しました。
４－１．ディレクティブ(Directive)
Marp にはテーマやページ番号、ヘッダー、フッターなどのスライド要素を制御するための 「ディレクティブ（Directives）」 と呼ばれる拡張構文があり、ディレクティブは２種類あります。
【グローバルディレクティブ】
スライド全体に影響する設定（例: theme, size）。同じグローバルディレクティブを複数回設定した場合、後に書かれた値が優先されます。
theme：スライド全体のテーマ名を指定
style：テーマを微調整するための CSS を直接記述
headingDivider：見出し区切りオプション
size：テーマが提供するスライドサイズを指定
math：数式描画ライブラリを選択
title：スライド全体のタイトル
author：著者
description：スライドの説明
keywords：カンマ区切りのキーワード
urlHTML ：出力時の正規 URL
image：Open Graph 用画像 URL（HTML 出力時）
marp：VS Code で Marp 機能を有効化するか
【ローカルディレクティブ】
1 枚のスライドだけに適用される設定（例: paginate, header, footer）。
ローカルディレクティブは、次のスライドに明示的な設定が無い限り前のスライドから継承されます。ただし接頭辞に"_"をつけることで指定ページのみに適用(spot directives)することが可能です。
paginate：true にするとページ番号を表示
タイトルスライドだけ番号をスキップする場合、paginate の定義を 2 枚目以降に置く、またはタイトルスライドで _paginate: false を指定
header：スライドのヘッダーを設定
footer：スライドのフッターを設定
class：<section> 要素に付与する HTML class 属性
backgroundColor：スライドの background-color スタイル
backgroundImage：スライドの background-image スタイル
backgroundPosition：スライドの background-position スタイル
backgroundRepeat：スライドの background-repeat スタイル
backgroundSize：スライドの background-size スタイル
color：スライドの文字色 (color スタイル)
４－２．ヘッダーの自動調整機能
見出し (#, ## …) の直後に <!--fit--> を書くと、文字サイズを自動縮小して見出し行を 1 行に収める。
headingDivider と併用すると、1 行に収まるスライドを 1 見出し=1 スライドで量産できる。
４－３．フラグメントリスト
Marpは、断片化されたリスト（インクリメンタルリストまたはビルドとも呼ばれる）を示すために、いくつかの珍しいリストマーカーを使用します。
フラグメントリストは、HTMLにエクスポートする場合にのみ使用できます。PDFやPPTXにエクスポートすると、フラグメントリストは通常のリストとしてレンダリングされます。
４－４．ヘッディング・ディバイダー
heading divider ディレクティブは指定されたレベルの見出しの前に自動的にスライドの区切りを追加するようにMarpに指示します。このディレクティブは既存のMarkdownドキュメントをスライドに変換するときに特に便利です。
４－５．スライドの書き方
以下の通り。
ページ区切り：水平線 ---
先頭のスライドにはタイトルを書き、次の --- 以降に内容を追加
marp: true をフロントマターに書くと VS Code でプレビューが有効化
<!--コメント--> はスピーカーノートとして使える
４－６．画像拡張記法
以下の通り。
４－７．数式のレンダリング
MarpはMathJax（あるいはKaTeX）を使って数式をレンダリングします。
グローバルディレクティブの"math"にレンダリングツールを記載すれば設定できます。
４－８．テーマ作成
HTMLやCSSでテーマ作成が可能。
５．応用編(Marp)
体裁を整えるための微調整やTipsが多くあります。
※使いながら適時記載予定
細やかな体裁を調整する機能はMarpにはまだ実装されていないため、必要に応じてHTMLやCSSを使用して調整します。
５－１．画像の追加・加工
Marpでは画像の追加が可能です。
画像の表示
画像サイズ変更
フィルター
背景画像
複数の背景 (Marpitの高度な背景)
分割背景
フッターやヘッダーに画像(logoなど）を表示
【画像表示】
シンプルに画像を表示する場合は下記の通り。
【test.md】
【画像サイズの指定】
画像サイズをPixel単位で指定するのは下記の通り。
【フィルター】
画像サイズにフィルターをかけるのは下記の通り。
blur：ぼかし
blur sepia：セピアのぼかし
opacity：透明度
grayscale：グレースケール
【test.md】
【test.md】
【test.md】
【test.md】
【背景画像】
スライドの背景に画像を設定するには、画像の構文にbgキーワードを追加します。背景画像にも透かしやグレースケール追加も可能です。
【test.md】
【test.md】
【複数の背景 (Marpitの高度な背景)】
Marpitの高度な背景機能を使うと、1つのスライドに複数の背景画像を重ねて表示できます。これは画像を連続して記述することで実現します。
【test.md】
verticalキーワードを追加すると、背景の配置方向を縦方向に変更できます。
【test.md】
【分割背景】
Decksetのような分割背景を実現するには、bgキーワードに加えてleftまたはrightキーワードを使います。これにより、スライドの一部を背景画像用に確保できます。
【test.md】
本機能で下記のようなスライドが簡単に作れます。
【test.md】
## スライドコンテンツ
ここにメインのコンテンツを記述します。
画像が右側に表示されます。
【フッターやヘッダーに画像(logoなど）を表示】
フッターやヘッダーに画像（ロゴなど）を直接表示する機能はMarpでみつけきれませんでした。
代わりにCSSで背景画像として設定したり、Markdownに直接HTMLタグを埋め込んだりする方法を利用していきます。CSSは不慣れなので、HTMLタグを直接いれてみました。
※実装は生成AIに依頼
【test.md】
# スライドタイトル
フッターを画像で表示
- カスタムテーマのCSSでロゴを設定
- Markdownファイル内の<style>タグでロゴを設定
<style scoped>
section::after { /* フッターの擬似要素として ::after を使用 */
content: "";
display: block;
position: absolute;
bottom: 0; /* スライド下端にぴったり配置 */
left: 0; /* スライド左端にぴったり配置 */
width: 100%; /* スライドの全幅 */
height: 100px; /* フッターとして表示したい画像の高さ */
background-image: url('https://picsum.photos/800/600'); /* 👈 ここをあなたの画像のURLまたは相対パスに置き換えてください */
background-size: cover; /* 要素全体に画像が広がるように調整 */
background-position: center bottom; /* 画像の表示位置を調整 (中央下部) */
background-repeat: no-repeat;
z-index: 10; /* 他のコンテンツより前面に表示 */
}
/* 画像がコンテンツに被らないように、必要であればスライドのpaddingを調整 */
section {
padding-bottom: 120px; /* 画像の高さ+αで調整 */
}
</style>
５－２．文字のサイズ・色調整
文字をプレゼン資料内に収めたり、強調したりするための構文を紹介します。
６．学習用
他に触ってみた内容を紹介します。
６－１．シンタックスハイライト
Markdownの機能ですが、HTMLやPythonのような言語を埋め込む時に、シンタックスハイライト（色を付けて綺麗に表示）が可能です。
※Marp自体はMarkdownをスライドに変換するツールのためPythonを実行はできません。
埋め込みは```(バッククォート)の後に言語名を記載します。結果は下記の通りであり、コードが綺麗に表示されました。
[test.md]
---
marp: true
author: KIYO
math: mathjax
---
<style>
section {
padding: 0px 20px 20px 20px; /* スライド全体の余白を調整
}
</style>
# Python埋め込みテスト
## 正規分布
$$
_f(x | \mu, \sigma^2) = \frac{1}{\sqrt{2\pi \sigma^2}} e^{-\frac{(x-\mu)^2}{2\sigma^2}}
$$
<details>
<summary>Pythonコードを表示/非表示</summary>
```python
import math
import numpy as np
import matplotlib.pyplot as plt
def normal_dist(x, mu, sigma):
output = 1 / (math.sqrt(2 * math.pi * sigma**2))) * math.exp(-((x - mu)**2) / (2 * sigma**2)
return output
mu = 0 # 平均
sigma = 1 # 標準偏差
x = np.linspace(-3, 3, 100)示範囲を平均と標準偏差に合わせる
y = normal_dist(x, mu, sigma)
```
</details>
６－２．ロゴをつける
スライドの指定場所に画像を埋め込むこともできるため、ロゴを付けることが出来ます。下記記事参考にしながら作成してみました(AIで作成)。
[marp_log.md]
---
marp: true
theme: gaia
---
<style>
header::after {
content: "";
display: block;
position: absolute;
right: 25px;
top: 10px;
width: 250px;
height: 80px;
background: url("https://raw.githubusercontent.com/marp-team/marp/master/marp.png") no-repeat center;
background-size: contain;
}
</style>
<!-- header: " " -->
# Marpスライドのロゴ表示
## ロゴ配置方法
ヘッダー右上にロゴを配置するには、`::after`疑似要素とCSSを利用します。
---
<!-- header: " " -->
## 実装コードとイメージ
**実装イメージ:** ヘッダーにロゴが表示されます。
（通常、ヘッダーにテキストがある場合はそれと共に表示されます）
```css
/* ヘッダー右上にロゴを配置 */
header::after {
content: "";
display: block;
position: absolute;
right: 25px;
top: 10px;
width: 250px;
height: 80px;
background: url("https://raw.githubusercontent.com/marp-team/marp/master/marp.png") no-repeat center;
background-size: contain;
}
```
---
<!-- header: " " -->
## CSS解説とまとめ
* `header::after`: ロゴ表示用のコンテナを生成。
* `position: absolute; right: 25px; top: 10px;`: 右上に配置。
* `width: 250px; height: 80px;`: ロゴサイズを指定。
* `background`: ロゴ画像を指定し、表示方法を調整。
* `url(...)`: 画像パス（今回はMarpチームのロゴURL）。
* `no-repeat center`: 画像を中央に1つだけ表示。
* `background-size: contain;`: アスペクト比を保ちつつフィット。
現状のthemaがgaiaになっておりますがこれを削除するとロゴも消えます。Gaiaテーマに依存せずにヘッダーとロゴを表示するために、header 要素に直接スタイルを適用します。
フロントマターから theme: gaia を削除し、<style> タグ内に header 要素自体にスタイルを追加してみましたが、なんかこれじゃない感（上の余白が空きすぎ）がでました。
多分CSSとかちゃんといじったらできると思いますが、結構手間なので他の人の記事を待ちます。
[marp_logo2.md]
---
marp: true
---
<style>
header {
height: 80px; /* ヘッダーの高さをロゴの高さに合わせる */
position: relative; /* ロゴの絶対配置の基準とする */
}
header::after {
content: "";
display: block;
position: absolute;
right: 25px;
top: 0; /* ロゴをヘッダーの上端に配置 */
width: 250px;
height: 80px;
background: url("https://raw.githubusercontent.com/marp-team/marp/master/marp.png") no-repeat center;
background-size: contain;
}
</style>
<!-- header: " " -->
# Marpスライドのロゴ表示
## ロゴ配置方法
ヘッダー右上にロゴを配置するには、`::after`疑似要素とCSSを利用します。
---
<!-- header: " " -->
## 実装コードとイメージ
**実装イメージ:** ヘッダーにロゴが表示されます。
（通常、ヘッダーにテキストがある場合はそれと共に表示されます）
```css
/* ヘッダー右上に企業ロゴを配置 */
header::after {
content: "";
display: block;
position: absolute;
right: 25px;
top: 0; /* ロゴをヘッダーの上端に配置 */
width: 250px;
height: 80px;
background: url("https://raw.githubusercontent.com/marp-team/marp/master/marp.png") no-repeat center;
background-size: contain;
}
```
---
<!-- header: " " -->
## CSS解説とまとめ
* `header::after`: ロゴ表示用のコンテナを生成。
* `position: absolute; right: 25px; top: 0;`: 右上に配置。
* `width: 250px; height: 80px;`: ロゴサイズを指定。
* `background`: ロゴ画像を指定し、表示方法を調整。
* `url(...)`: 画像パス（今回はMarpチームのロゴURL）。
* `no-repeat center`: 画像を中央に1つだけ表示。
* `background-size: contain;`: アスペクト比を保ちつつフィット。
参考資料
別添１：Marp/Marpit
別添２：技術ブログ
別添３：Markdown
別添４：その他
あとがき
あくまで「テキストでサクッとつくる」というところがよいけど、微調整とかファイルのベースを作る（後は手で修正）って所までやろうとすると学習コストが跳ね上がりそう。
ただ、説明資料とかはめちゃめちゃ使えそうなのでつかってみたい
コメント