Marpでスライドを作ってみる
henoyaMarp というものを知った
Markdown 形式でスライドを作成するのに Marp というプログラムがあるのを知った。
ちょうどシステム導入のための提案をするのに、スライドを作る必要があったので、試してみることにする。
PowerPoint とか Googleスライドに持って行ければいいなあ。
henoya参考ページ:
- 【VS Code + Marp】Markdownから爆速・自由自在なデザインで、プレゼンスライドを作る - Qiita
- Markdownから簡単にスライドを作成する「Marp(Marpit)」 | tracpath:Works
VSCode 用の機能拡張 Marp for VS Code - Visual Studio Marketplace をインストール
Marp の作者って日本の方なのか yhatt (Yuki Hattori)
henoya公式の Github ページは marp-team/marp: The entrance repository of Markdown presentation ecosystem
オフィシャルサイトは Marp: Markdown Presentation Ecosystem
henoyaMarp のシンタックス Introduction
基本 CommonMark + スライド用の拡張っぽい
henoyaFront Matter として marp: true を書いて、
基本は --- がスライドのページ区切りとして使用される
---
marp: true
---
# Slide1
foo
---
# Slide 2
bar
↓
henoyaページ指定とかの指示YAML形式。先頭の Front Matter に書くか、途中のスライドに対しては<!-- --> 形式のコメントで記述する.
---
marp: true
theme: default
paginate: true
------
# Slide 1
---
<!-- _backgroundColor: aqua -->
このページの背景は水色
# Slide2
---
# Slide 3
henoyaDirective での指定は、そのページ以降に影響するが、先頭に '_' を付けると、Local directive としてそのページだけの指定になる。
henoyaGlobal directives
全体に影響する
| Name | Description |
|---|---|
theme |
deck のテーマ |
style |
テーマに追加する CSS スタイル |
headingDivider |
ページ区切りとして使用するヘッダーのレベル数 |
headingDivider を指定すると そのレベル以上のヘッダがあれば自動的にページ区切りとなる
---
marp: true
headingDivider: 2
------
# Slide 1
## Slide 2(ヘッダー Level2)
Local directives
書かれたページと以降のページに影響する
'_' を付けるとそのページだけに影響する
| Name | Description |
|---|---|
paginate |
true にするとページ番号を表示する |
header |
ヘッダ文字列を指定 |
footer |
フッタ文字列を指定 |
class |
ページの <section> エレメントに Class を付ける |
backgroundColor |
背景色 background-color
|
backgroundImage |
背景画像 background-image
|
backgroundPosition |
背景画像の配置 background-position
|
backgroundRepeat |
背景画像 繰り返し background-repeat
|
backgroundSize |
背景画像のサイズ background-size
|
color |
テキストのカラー color
|
henoya'_' 付きだとそのページのみに有効になるので、以下のように書くと先頭ページのみページ番号なしで、他のページはデフォルトページ番号ありになる。
---
marp: true
paginate: true
_paginate: false
---