Qiita のスライド機能で使えるMarpit Markdow記法のチートシートです。
記法は Marpit Markdown に準拠し、一部拡張しています。
Directives（ディレクティブ）
Directives （ディレクティブ）と呼ばれる拡張構文を使うことで、スライドのテーマ、ページ番号、ヘッダー、フッター、スタイルなどを制御できます。
グローバルディレクティブ
グローバルディレクティブは、テーマなどスライドデッキ全体の設定値です。
スライドの最初に記載します。
同じグローバルディレクティブを複数回記述した場合、最後に記述された値のみを認識します。
<!--
theme: default
paginate: true
-->
または
---
theme: default
paginate: true
---
ローカルディレクティブ
ローカルディレクティブは、スライドページごとの設定値です。
これは、定義されたページとそれ以降のページに適用されます。
<!-- backgroundColor: aqua -->
このページの背景は `aqua` になります。
---
2ページ目も同じ背景色になります。
スポットディレクティブ
ローカル ディレクティブを現在のスライドページだけに適用する場合は、_ をディレクティブの名前の前に追加する必要があります。
<!-- _backgroundColor: aqua -->
このページの背景は `aqua` になります。
---
2ページ目には `aqua` は適応されません。
グローバルディレクティブで使用できる設定
| 値 | 説明 |
|---|---|
headingDivider |
見出し区切りのオプションを指定します |
lang |
各スライドのlang属性の値を設定します |
style |
スタイルを調整するための CSS を指定します |
スタイルの調整
---
style: |
section {
background-color: #ccc;
}
---
ローカルディレクティブで使用できる設定
| 値 | 説明 |
|---|---|
paginate |
設定すると、スライドにページ番号が表示されます デフォルトは true
|
header |
スライド ヘッダーの内容を指定します。 |
footer |
スライド フッターの内容を指定します。 |
class |
スライドの <section> 要素の HTML クラスを指定します。 |
backgroundColor |
スライドの background-color（背景色）を設定します |
backgroundImage |
スライドの background-image を設定します |
backgroundPosition |
スライドの background-position を設定します |
backgroundRepeat |
スライドの background-repeat を設定します |
backgroundSize |
スライドの background-size スタイルを設定します |
color |
スライドの color （文字色）スタイルを設定します。 |
ページネーション
スライドのページ番号について、下記を管理することができます。
- ページ番号の表示・非表示
- ページ番号のカウント
| paginate | ページ番号 | ページ番号のカウント（増加） |
|---|---|---|
true |
表示 | カウントする |
false |
非表示 | カウントする |
hold |
表示 | カウントしない |
skip |
非表示 | カウントしない |
ヘッダーとフッター
---
header: 'ヘッダーコンテンツ'
footer: 'フッターコンテンツ'
---
# Page 1
---
## Page 2
下記のようにHTMLがレンダリングされます
<section>
<header>ヘッダーコンテンツ</header>
<h1>Page 1</h1>
<footer>フッターコンテンツ</footer>
</section>
<section>
<header>ヘッダーコンテンツ</header>
<h2>Page 2</h2>
<footer>フッターコンテンツ</footer>
</section>
スライドの分割
通常の構文
デフォルトでは、 --- でスライドを分割できます。
--- の前後には空行が必要です。
# Slide 1
1ページのコンテンツ
---
# Slide 2
2ページのコンテンツ
見出し区切り
これはグローバルディレクティブで使用できます。
<!-- headingDivider: 2 --> と宣言すると、 h2 がスライドの区切りとして認識されます。
数値を変更すると、区切りとして扱う見出しのレベルを変更できます。
<!-- headingDivider: 2 -->
# Page 1
1ページのコンテンツ
## Page 2
### ページ2のコンテンツの見出し
2ページのコンテンツ
# Page 3
ページ3のコンテンツ
スピーカーノート
HTMLコメントアウトの書式で、スピーカーノートを作成することができます。
## Page 1
1ページのコンテンツ
<!--
ここにスピーカーノートに記載したい文章を記入してください
-->
基本的なスタイリングについて
| 値 | 説明 |
|---|---|
section |
スライド1枚のスタイルを指定できます |
h1 ~ h6
|
# なら h1 、 ## なら h2 のスタイルを指定できます |
p |
地のテキストのスタイルを指定できます |
ul |
リストのスタイルを指定できます |
例えば、ローカルディレクティブでスタイルを適応したい場合下記のように記載します。
<!--
style: |
section {
background-color: #ccc;
}
-->
## Page 1
1ページのコンテンツ
テーマ
スライド全体のテーマは、グローバルディレクティブの theme で指定します。
テーマ名には、Qiita オリジナルテーマや自分で作成したカスタムテーマを指定できます。
---
theme: qiita
---
# Slide 1
デフォルトテーマとして以下が用意されています。
| テーマ名 | 説明 |
|---|---|
qiita |
Qiita オリジナルテーマ |
default |
Marp の標準テーマ |
gaia |
Marp の標準テーマ |
uncover |
Marp の標準テーマ |
スライドエディタのツールバーの「テーマ」からテーマを選ぶと、theme ディレクティブが自動で挿入されます。
テーマの選択方法や、カスタムテーマの作成・管理については、Qiitaヘルプを参照してください。
画像
リサイズ
横幅や縦幅を指定することも可能です。
 <!-- 画像の幅を200pxに設定 -->
 <!-- 画像の高さを50pxに設定 -->
 <!-- 画像の幅と高さを一緒に設定 -->
スライドの背景
bg を画像の代替テキストに含めると、スライドの背景画像として扱います
スライドの背景のサイズ
bg の後ろに値を入力すると background-size に当たる設定を指定することができます。
| 値 | 説明 | 例 |
|---|---|---|
cover |
スライド全体を埋めるように画像を拡大縮小します。(デフォルト) |  |
contain |
スライドに合わせて画像を拡大縮小します。 |  |
fit |
contain と同じようにスライド内に収まるように表示します。Deckset と互換性があります。 |
 |
auto |
画像は拡大縮小せず、元のサイズのまま使用します。 |  |
x% |
スケーリング係数をパーセンテージ値で指定します。 |  |
スライドの背景を複数設置する
横並びに配置
縦並びに配置
スライドの背景の位置を設定する
bg の後ろに、 right、 left と入力すると分割して表示することができます。
| 値 | 説明 | 例 |
|---|---|---|
right |
右に背景を配置します。デフォルトのサイズはスライドの50%です |  |
left |
左に背景を配置します。デフォルトのサイズはスライドの50%です |  |
表示サイズを一緒に指定することもできます。
箇条書き（リスト表記）
順序なしのリスト
-、+、 * を箇条書き（リスト）の記号として利用できます。
記号の後ろには半角スペースが必用です。
* を使用すると、分断されたリストとして解釈されます。
下記の用に一緒のページで２つのリストを使うと、別々のリストになります。
# リスト
- リストのアイテム1
- リストのアイテム2
- リストのアイテム3
* リストのアイテム1
* リストのアイテム2
* リストのアイテム3
順序付きのリスト
1. のように、数字の後ろに . と 半角スペース をいれると順序付きリストになります。
1) と記載すると、分断された順序付きのリストとして解釈されます。
下記の用に一緒のページで２つのリストを使うと、別々のリストになります。
# 番号付きリスト
1. リストのアイテム1
2. リストのアイテム2
3. リストのアイテム3
1) リストのアイテム1
2) リストのアイテム2
3) リストのアイテム3