Marpの見た目を調整する際の備忘録

普段Markdownでメモを取っている場合、それを会議などで人に見せる場合には Marp を使うと便利ですが、その際にカスタムテンプレートを使いたくなる場合があります。

この記事は、主にカスタムテーマを比較的マシな見た目で作るための備忘録です。

ヘッダやフッタは基本的にSectionに対するBackground指定でごまかしたほうが見た目の調整が楽

header、footer などのディレクティブを使ってヘッダ、フッタを描画しようとするとうまく行かない場合が多いので、会社のロゴなどをヘッダ、フッタに入れる場合は単純に section 要素に対する背景（CSS background プロパティ）として指定したほうが background-position などで絶対位置の調整がしやすく、楽です。

この際、background は複数指定できることを利用すると比較的複雑なことが可能です。

例えば背景と別に、右上にロゴを入れたい場合は以下のような感じになります：

section {
   background-image: url(URL_TO_MAIN_BACKGROUND),
     url(URL_TO_HEADER_LOGO);
   background-repeat: no-repeat;
   background-position: top left,
     right 30px top 30px;
}

特定のページだけスタイルを変えたい場合は、class を使うと楽

CSS側

section {
   /* ... 通常セクションの設定 */
}
section.top {
   /* ... トップページの設定 */
}

Markdown側

<!-- _class: top -->
# トップページ

内容

---

# 続きのページ

...

この際、クラスの指定は _class だと1ページだけ、class だとそれ以降のページ全てに影響する。

ページ番号付の設定は、Markdown側に記載する必要がある（っぽい）

詳細確認中だが、.marprc.yml などに pagination ディレクティブを記載しても反映されないような気がする。

YMLのFront Matterを書くと、他のツールとの整合が難しいので、コメントに入れるほうが良い

以下のように Front Matter　を記載すると、他のツールでその部分が表示されたりしてちょっと不便。

---
title: テスト
---

副作用を避けたいならコメント中に入れるほうが無難。

<!--
title: テスト
-->

YAML形式のディレクティブ表記の場合、: のあとにスペースが必要（なような気がする）

詳細確認中。_class:top と書くと反映されないが、_class: top と書くと反映される。

ページ区切りをあまり気にしないで記事を書きたい場合は headingDivider が便利

1) headingDivider ディレクティブで自動的にページ切り替えになる見出しレベルを設定しておくと書き散らす場合には楽。

2) この headingDivider ディレクティブも Local 扱いなので、ファイル中に記載する必要があるような気がする。

3) headingDivider ディレクティブを設定している場合に、ページ内の設定を _class 指定などで変える場合は以下のような記載方法になる

## Heading
<!-- _class: something -->
個々の内容が `something` 扱いになる。

Fragmented Listが鬱陶しい場合は、Fragmentされない表記を使う

Marpにはリストがあった場合にそれをクリックごとに表示するPowerPointのアニメーションに対応する機能（Fragmented List）があるが、これが有効になる表記と、そうでない表記があるので使い分けよう。

* Fragment
* List

- Not Fragmented
- List

1) Fragmented
1) Numbered List

1. Not Fragmented
1. Numbered List