📊
Marpの自分用メモ
準備
- VSCodeにMarp for VS Codeを追加
- VSCodeの設定 -> Markdown > marp: Themes にCSSファイルのパス or URLを追加
使い方
- mdファイルを作成してプレビューアイコンを押す
記法
- ページ区切りは
--- - 見出しでページを区切るときは
<!-- headingDivider: 1 -->
ディレクティブ
| 名前 | 説明 |
|---|---|
| marp | marpを有効化するか |
| theme | テーマの指定 |
| paginate | スライドにページ番号を表示するか |
| header | ヘッダーの内容を指定 |
| footer | フッターの内容を指定 |
| class | スライドの<section>要素のHTMLクラスを指定 |
| backgroundColor | background-colorのスタイル |
| backgroundImage | background-imageのスタイル |
| backgroundPosition | background-positionのスタイル |
| backgroundRepeat | background-repeatのスタイル |
| backgroundSize | background-sizeのスタイル |
| color | colorのスタイル |
| math | 数式の環境 (katex/mathjax) |
一部のスライドに適用
<!-- xxx --> の形式で、各スライドの頭に設定を記述
| _を頭に | 効果範囲 |
|---|---|
| つける場合 | 「対象のスライドのみ」に設定を適用 |
| つけない場合 | 「そのスライド以降の全て」に設定を適用 |
Tips
文字の中央寄せ・右寄せ
<div style="text-align:center">中央寄せにしたい文章</div>
文字のサイズ
<span style="font-size: **px;">文字のサイズ</span>
画像のサイズと表示位置
画像の配置方向を縦に
参照
Discussion