---
name: marp
description: Writing slide decks with marp. Use when create or edit markdown for map.
---

# Marp: Markdown Presentation Ecosystem

Marp (also as the Markdown Presentation Ecosystem) provides a intuitive experience for creating beautiful slide decks.

## FrontMatter

フロントマターで、マークダウンファイルが marp ファイルであることは明示します。

```markdown
---
marp: true
---
```

このフロントマターには以下の項目を設定できます。

| Name     | Value                                             |
| -------- | ------------------------------------------------- |
| marp     | true                                              |
| size     | 16:9                                              |
| theme    | 'pixy'                                            |
| header   | Specify the content of slide header               |
| footer   | Specify the content of slide footer               |
| paginate | Show page number on the slide if you set `true`   |
| class    | Specify HTML class of slide's `<section>` element |

## How To

### 新しいスライド

新しいスライドは水平罫線（`---`）で区切ります。

### Directives

`<!-- (directive): (value) -->` でスライドの設定を編集できます。ディレクティブが指定された後のスライドに適用されます。もし、特定のスライドのみて適用する場合、`directive` 前にアンダースコア（`_`）を付けます（例：`<!-- _class: text-xl -->`）。

ディレクティブ表：

| Name               | Description                                        |
| ------------------ | -------------------------------------------------- |
| class              | Specify HTML class of slide's `<section>` element. |
| backgroundColor    | Setting `background-color` style of slide.         |
| backgroundImage    | Setting `background-image` style of slide.         |
| backgroundPosition | Setting `background-position` style of slide.      |
| backgroundRepeat   | Setting `background-repeat` style of slide.        |
| backgroundSize     | Setting `background-size` style of slide.          |
| color              | Setting `color` style of slide.                    |

### クラス

`<!-- class: (name) -->` を記述すると、それ以降のスライドに適用されます。複数の指定は `<!-- class: (name1) (name2) -->` のようにします。もし、現在のスライドのみ適用する場合、`<!-- _class: (name) -->` を使います。ただし、`_class` を指定した場合、グローバルスタイルは継承されないので、グローバルスタイルで指定しているスタイルを使う場合は適用すること。

### 画像

一般的なマークダウン記法と同じ `![](<path>)` で画像を指定できます。

| Syntax                        | Description                      |
| ----------------------------- | -------------------------------- |
| `![w:400px h:300px](img.png)` | サイズ指定                       |
| `![bg](img.png)`              | 背景画像                         |
| `![bg fit](img.png)`          | 背景（スライドサイズに合わせる） |
| `![bg cover](img.png)`        | 背景（カバー）                   |
| `![bg contain](img.png)`      | 背景（含む）                     |
| `![bg left:40%](img.png)`     | 左右分割（左）                   |
| `![bg right:60%](img.png)`    | 左右分割（右）                   |

### GFM記法

-   見出し: `# H1`, `## H2`, `### H3`
-   強調: `**太字**`, `*斜体*`
-   リスト: `- 項目`, `1. 番号付き`
-   表

### 背景色

`<!-- _backgroundColor: #1a1a2e -->` のように指定。

### インラインHTML

`<style scoped>` でスライド単位の CSS を適用。

### 数式

KaTeX に対応。`$E=mc^2$` / `$$ ... $$`

## テンプレート

`TEMPLATE.md` を使用してください

## サンプル

`EXAMPLE.md` を参照してください

## ルール

-   リードスライドには class ディレクティブに `lead` スタイルをつける
-   新しいトピックスライドの1枚目は class ディレクティブに `topic` をつける
-   スライドの H1 見出しは 20 文字以内にすること
-   リードスライドおよびトピックスライドの H1 見出しは 15 文字以内にすること
-   スライドは最大 5 行。1 行の文字数は 36 文字。リスト項目の場合、最大 8 項目。4項目以下のリストの場合、class ディレクティブで `list-lg` をつける。スライドがコードや整形済みテキストのみであれば最大 15 行。
-   表は列見出し 1 行とデータ行が最大 8 行。
-   見出しには強調 `**見出し**` を使用しないこと。代わりに H2 の見出し `## 見出し` を使用すること
-   ハイライト（強調）に `**強調**` を使用すること
-   H2 および H3 を使ったレイアウトは以下のどれかを使用すること。最大行数は決まっています。

```markdown
---
# H1
## H2

(Line1)
(Line2)
(Line3)
(Line4)
(Line5)

---
# H1
## H2

(Line1)
(Line2)

## H2

(Line1)
(Line2)

---
# H1
## H2

-   (Line1)
-   (Line2)
-   (Line3)

## H2

-   (Line1)
-   (Line2)
-   (Line3)

---
# H1
### H3

(Line1)
(Line2)

### H3

(Line1)
(Line2)

### H3

(Line1)
(Line2)
```
