7.4 KiB
7.4 KiB
Marp 高度な機能リファレンス
Marp CoreとMarpitの高度な機能。
Fragmented List（段階的表示）
リストアイテムを段階的に表示する機能（アニメーション効果）。
公式ドキュメント: https://github.com/marp-team/marpit/tree/main/docs/fragmented-list
基本的な使い方
* Item 1
* Item 2
* Item 3
通常、すべてのアイテムが一度に表示されます。
アスタリスク（*）の使用
* Item 1
* Item 2
* Item 3
Marp CLIで--htmlオプション使用時、各アイテムが順次表示されます。
注意事項
- HTML出力時のみ有効: PDF/PPTX/画像では効果なし
- プレゼンテーションモード: ブラウザでのプレゼンテーション時に機能
- Marp for VS Code: プレビューでは動作しない場合あり
数式記法（Marp Core拡張）
Pandoc形式の数式をサポート。KaTeXを使用してレンダリング。
公式: https://github.com/marp-team/marp-core#math-typesetting
インライン数式
文中に $E = mc^2$ を挿入
ブロック数式
$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$
複数行の数式
$$
\begin{aligned}
f(x) &= x^2 + 2x + 1 \\
&= (x + 1)^2
\end{aligned}
$$
数式の例
## 二次方程式の解
$$
x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
$$
## オイラーの等式
$$
e^{i\pi} + 1 = 0
$$
注意事項
- KaTeX記法: LaTeX構文のサブセット
- サポート外の記法: 一部のLaTeX機能は非対応
- KaTeX公式: https://katex.org/docs/supported.html
絵文字（Marp Core拡張）
GitHub Emoji記法をサポート。
公式: https://github.com/marp-team/marp-core#emoji
使用方法
:smile: :heart: :+1: :sparkles:
レンダリング結果: 😄 ❤️ 👍 ✨
よく使う絵文字
:arrow_right: →
:check: ✓
:x: ✗
:bulb: 💡
:warning: ⚠️
:rocket: 🚀
:tada: 🎉
絵文字リスト
完全なリスト: https://github.com/ikatyang/emoji-cheat-sheet
Auto-scaling（自動スケーリング）
テキストが多い場合、自動的にフォントサイズを調整。
無効化
---
marp: true
---
<!-- _class: no-scaling -->
# 自動スケーリングなし
カスタムCSSで制御：
section.no-scaling {
--marpit-auto-scaling: off;
}
HTMLタグの使用
Markdown内で直接HTMLを記述可能。
配置制御
<div style="text-align: center;">
中央配置のテキスト
</div>
2カラムレイアウト
<div style="display: flex;">
<div style="flex: 1;">
## 左側
- ポイント1
- ポイント2
</div>
<div style="flex: 1;">
## 右側
- ポイント3
- ポイント4
</div>
</div>
スタイル付きボックス
<div style="background-color: #e3f2fd; padding: 20px; border-radius: 8px;">
**重要なポイント**
ここに重要な内容を記述
</div>
Marp CLI 詳細オプション
公式: https://github.com/marp-team/marp-cli
基本的なコマンド
# HTMLに変換
marp slide.md
# PDFに変換
marp slide.md --pdf
# PowerPointに変換
marp slide.md --pptx
# 画像に変換
marp slide.md --images png
監視モード
# ファイルを監視して自動変換
marp -w slide.md
# サーバーモードで監視
marp -s -w slide.md
テーマ指定
# カスタムテーマを使用
marp slide.md --theme custom-theme.css
# テーマディレクトリを指定
marp slide.md --theme-set themes/
複数ファイルの一括変換
# ディレクトリ内のすべてのMarkdownを変換
marp slides/*.md
# 出力ディレクトリを指定
marp slides/*.md -o output/
HTML出力オプション
# HTML出力（単一ファイル）
marp slide.md -o output.html
# スタンドアロンHTML（CDN使用）
marp slide.md --html
PDF出力オプション
# PDF出力
marp slide.md --pdf --allow-local-files
# ページ番号なしでPDF
marp slide.md --pdf --pdf-notes
画像出力
# PNG画像として出力
marp slide.md --images png
# JPEG画像として出力
marp slide.md --images jpeg
# 解像度指定
marp slide.md --images png --image-scale 2
Marp for VS Code
公式: https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode
有効化
Markdownファイルのフロントマターに記述：
---
marp: true
---
プレビュー
Ctrl+Shift+V(Win/Linux)Cmd+Shift+V(Mac)
エクスポート
- コマンドパレット (
Ctrl+Shift+P) - "Marp: Export slide deck..."を選択
- 形式を選択（HTML/PDF/PPTX/PNG/JPEG）
設定
VS Codeの設定でカスタマイズ可能：
{
"markdown.marp.themes": [
"./themes/custom-theme.css"
],
"markdown.marp.enableHtml": true
}
GitHub Actions での自動ビルド
公式: https://github.com/marketplace/actions/marp-action
基本的なワークフロー
name: Marp Build
on:
push:
branches: [ main ]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Marp Build
uses: docker://marpteam/marp-cli:latest
with:
args: slides.md --pdf --allow-local-files
- name: Upload PDF
uses: actions/upload-artifact@v3
with:
name: slides
path: slides.pdf
GitHub Pagesへの公開
- name: Marp to Pages
uses: docker://marpteam/marp-cli:latest
with:
args: slides.md -o index.html
- name: Deploy to Pages
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./
Tips & Tricks
1. スライド番号のカスタマイズ
section::after {
content: 'Page ' attr(data-marpit-pagination);
}
2. 背景のグラデーション
---
backgroundImage: linear-gradient(135deg, #667eea 0%, #764ba2 100%)
color: white
---
3. 2段組レイアウト
<div class="columns">
<div>
左側のコンテンツ
</div>
<div>
右側のコンテンツ
</div>
</div>
<style>
.columns {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
</style>
4. プログレスバー
section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: calc(var(--paginate) / var(--paginate-total) * 100%);
height: 5px;
background-color: #3b82f6;
}
トラブルシューティング
PDFが生成されない
- ChromeまたはEdgeがインストールされているか確認
--allow-local-filesオプションを追加
フォントが表示されない
- Google Fontsなどは
@importで読み込む - ローカルフォントは絶対パスで指定
画像が表示されない
- 画像の相対パスを確認
--allow-local-filesが必要な場合あり
公式リファレンス集
- Marp公式サイト: https://marp.app/
- Marpit Directives: https://marpit.marp.app/directives
- Image Syntax: https://marpit.marp.app/image-syntax
- Theme CSS: https://marpit.marp.app/theme-css
- Marp Core: https://github.com/marp-team/marp-core
- Marp CLI: https://github.com/marp-team/marp-cli
- VS Code Extension: https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode