見出しと本文
行頭の`#`で見出しを作ります。記号の後ろに半角スペースを入れます。
記述例
# 大見出し
## 小見出し
文章はそのまま本文になります。- 表示結果
- 大見出し、小見出し、本文として表示されます。
Markdown記法集
Marplioで確認済みのMarkdownとスライド記法を、用途からすぐ引けるリファレンスです。
基本のMarkdown
文章の構造と強調に使う、標準的な記法です。
強調
太字、斜体、取り消し線を使い分けます。
記述例
**太字**
*斜体*
~~取り消し線~~- 表示結果
- 指定した文字だけが強調されます。
箇条書き
行頭に`-`と半角スペースを置きます。
記述例
- 調査する
- 試作する
- 検証する- 表示結果
- 項目が箇条書きで表示されます。
番号付きリスト
行頭に番号、ピリオド、半角スペースを置きます。
記述例
1. 調査する
2. 試作する
3. 検証する- 表示結果
- 順序を持つリストとして表示されます。
引用
行頭に`>`と半角スペースを置きます。
記述例
> 重要な結論を、最初に伝える。- 表示結果
- 引用文として装飾されます。
リンク
表示文字を角括弧、URLを丸括弧で囲みます。
記述例
[Marplio](https://marplio.com)- 表示結果
- クリックできるリンクとして表示されます。
インラインコード
短いコードや記号をバッククォート1つで囲みます。
記述例
`npm run build` を実行します。- 表示結果
- 文章の中でコード部分だけが区別されます。
コードブロック
複数行のコードをバッククォート3つで囲みます。言語名も指定できます。
記述例
```ts
const message = "Hello, Marplio";
```- 表示結果
- 改行と色付けを保ったコードブロックになります。
表
縦棒で列を分け、2行目で見出しと本文を区切ります。セル内の改行には`<br>`を使えます。
記述例
| 項目 | 結果 |
| --- | --- |
| 利用者 | +28%<br>前月比 |
| 時間 | -2h |- 表示結果
- 見出し行を持つ表として表示されます。
- 現在の制限
- 列が多い表は1枚に詰め込まず、文字量を減らしてください。
Marp・Marplio記法
ページ分割やスライドの役割を指定する記法です。
貼り付けたMarkdownを整える
空のEditor、または全文を選択した状態へ、H1と1つ以上のH2を持つMarkdownを貼り付けると、見出しごとにスライドへ分割します。
- 表示結果
- 最初の見出しは表紙、続く見出しは本文スライドになります。一般的な箇条書き記号や番号もMarkdown記法へ揃えます。
- 現在の制限
- 既に`---`や`_class`があるDeck、コードブロック、frontmatterは書き換えません。意図と違う場合は1回の「元に戻す」で貼り付け前へ戻せます。
スライドを分ける
単独行の`---`で次のスライドを始めます。
記述例
# 1枚目
---
# 2枚目- 表示結果
- 2枚のスライドとして生成されます。
ページ番号
先頭にpaginate directiveを置くと、以降のスライドへページ番号を表示します。
記述例
<!-- paginate: true -->
# 1枚目
---
# 2枚目- 表示結果
- 各スライドにページ番号が表示されます。
スライドの役割
`_class`で表紙、目次、中表紙、本文、締めの役割を指定します。
記述例
<!-- _class: cover -->
# 発表タイトル
---
<!-- _class: agenda -->
## 目次
1. はじめに
2. 結論
---
<!-- _class: section-cover -->
# 01
## はじめに
---
<!-- _class: content -->
## 要点
本文
---
<!-- _class: closing -->
# ありがとうございました- 表示結果
- 各スライドが選択中のデザインに対応した役割で組版されます。
本文の表現を選ぶ
`content`の後ろに表現classを加えます。役割と表現を同じ`_class`へ空白区切りで書きます。
記述例
<!-- _class: content quote -->
## 利用者の声
> 準備が短くなりました。
---
<!-- _class: content two-column -->
## 2つの観点
### 現在
課題を書く。
### 次
行動を書く。- 表示結果
- 引用または2カラムの本文レイアウトとして表示されます。
- 現在の制限
- `quote`、`two-column`、`kpi`、`comparison`、`timeline`、`pillars`、`image`を利用できます。
本文を2列に分ける
見出しや文章、箇条書き、図を左右へ配置します。`columns`と左右の開始コメントを単独行で書きます。Editor下部の「2列」から例を追加できます。
記述例
<!-- _class: content columns -->
## ファネルと次の打ち手（サンプル）
<!-- marplio:column left -->
### 根拠
- 対象者と現状
- 判断に必要な数字
<!-- marplio:column right -->
### 読み解き
この内容と数値は例です。実際の根拠に置き換えてください。
- 注目する変化
- 次に試すこと- 表示結果
- 左と右が独立した列になり、文章は編集可能なまま表示・書き出しされます。
- 現在の制限
- 既存の`two-column`は見出し2組の比較用です。3列・入れ子や外部URL画像はサポートしていません。
見出しを横幅へ合わせる
`<!-- fit -->`を見出し内へ置くと、利用可能な横幅へ文字を自動調整します。
記述例
# <!-- fit --> Build less. Prove more.- 表示結果
- 見出しが横幅へ収まるように拡大・縮小されます。
- 現在の制限
- 固定サイズではありません。短い主題だけに使い、通常の見出しには付けないでください。
Chart記法
`chart`ブロックへJSONを書き、数値をスライド内で可視化します。1枚につき1つのChartを配置できます。
表から作る
Editor下部のChartボタンを開き、セルを直接編集します。Excel・Google Sheets・CSVからコピーした範囲も、選択したセルを起点に貼り付けられます。
- 表示結果
- 1列目がラベル、2列目以降が系列としてChart JSONへ変換され、Markdownへ挿入されます。
- 現在の制限
- 入力した表は保存・送信されません。最大12データ行・4系列です。円・ドーナツグラフは1系列だけ使用できます。
棒グラフ
カテゴリー間や複数系列の数値を比較します。
記述例
```chart
{"version":1,"type":"bar","title":"四半期別ダウンロード数","labels":["Q1","Q2","Q3","Q4"],"series":[{"name":"PDF","values":[120,180,240,310]},{"name":"PowerPoint","values":[80,130,190,260]}]}
```- 表示結果
- カテゴリーごとの棒と凡例が表示されます。
- 現在の制限
- 最大12ラベル・4系列です。系列ごとのvalues数をlabels数と揃えてください。
折れ線グラフ
月や四半期など、順序のある値の推移を示します。
記述例
```chart
{"version":1,"type":"line","title":"月間ユーザー数","labels":["1月","2月","3月","4月","5月"],"series":[{"name":"ユーザー","values":[120,180,260,310,420]}]}
```- 表示結果
- 値を結ぶ線、点、軸、凡例が表示されます。
- 現在の制限
- 最大12ラベル・4系列です。ラベルは時間順に並べてください。
円グラフ
全体に対する各項目の割合を示します。
記述例
```chart
{"version":1,"type":"pie","title":"テンプレート利用割合","labels":["Business","Education","Creative","Technology"],"series":[{"name":"利用数","values":[42,25,18,15]}]}
```- 表示結果
- 各ラベルの割合が円の区画として表示されます。
- 現在の制限
- 系列は1つだけで、valuesには0以上の数値を指定します。
ドーナツグラフ
中央に余白を持たせながら構成比を示します。
記述例
```chart
{"version":1,"type":"doughnut","title":"アカウント構成","labels":["Guest","Free","Plus","Pro"],"series":[{"name":"ユーザー","values":[55,30,10,5]}]}
```- 表示結果
- 各ラベルの割合がリング状に表示されます。
- 現在の制限
- 系列は1つだけで、valuesには0以上の数値を指定します。
Mermaid記法
`mermaid`ブロックで処理、やり取り、状態、クラス、データ関係を図にします。1枚につき1つ配置できます。
フローチャート
処理や判断の流れを示します。
記述例
```mermaid
flowchart LR
A[デザイン] --> B[Markdown]
B --> C[Preview]
C --> D{修正する？}
D -->|はい| E[内容・配置を調整]
E --> C
D -->|いいえ| F{出力}
F --> G[PDF]
F --> H[PowerPoint]
F --> I[Google Slides]
```- 表示結果
- 選択中のデザインに合わせた編集元Markdown由来の図を表示します。
- 現在の制限
- 外部リンク、click、HTML、init、任意style directiveは安全のため使用できません。
シーケンス図
登場人物やサービス間のやり取りを示します。
記述例
```mermaid
sequenceDiagram
利用者->>Marplio: Markdownを編集
Marplio-->>利用者: Previewを更新
```- 表示結果
- 選択中のデザインに合わせた編集元Markdown由来の図を表示します。
- 現在の制限
- 外部リンク、click、HTML、init、任意style directiveは安全のため使用できません。
状態遷移図
状態の変化を示します。
記述例
```mermaid
stateDiagram-v2
[*] --> Draft
Draft --> Review
Review --> Published
```- 表示結果
- 選択中のデザインに合わせた編集元Markdown由来の図を表示します。
- 現在の制限
- 外部リンク、click、HTML、init、任意style directiveは安全のため使用できません。
クラス図
クラスと依存関係を示します。
記述例
```mermaid
classDiagram
class Deck {
+String title
+export()
}
class Template
Deck --> Template : uses
```- 表示結果
- 選択中のデザインに合わせた編集元Markdown由来の図を表示します。
- 現在の制限
- 外部リンク、click、HTML、init、任意style directiveは安全のため使用できません。
ER図
データ同士の関係を示します。
記述例
```mermaid
erDiagram
USER ||--o{ DECK : owns
DECK }o--|| TEMPLATE : uses
```- 表示結果
- 選択中のデザインに合わせた編集元Markdown由来の図を表示します。
- 現在の制限
- 外部リンク、click、HTML、init、任意style directiveは安全のため使用できません。
現在の制限
安全性とPreview・書き出しの一致を守るための制限です。
HTMLは使用できません
表セル内の安全な改行に使う`<br>`を除き、Markdown内のHTMLタグはMarplio Engineで無効化されます。
- 表示結果
- HTMLではなく、上記のMarkdown記法を使用してください。
外部画像は案内対象外です
外部URL画像は現在のPreviewセキュリティ設定で読み込めません。
- 表示結果
- Previewと書き出しの動作を統一する対応が完了するまで、画像記法はサポート対象外です。
themeと16:9は自動設定されます
Marplioが選択中のデザインとスライドサイズを自動で付与します。
- 表示結果
- front matterやtheme名をMarkdownへ書く必要はありません。