日付・フッター・ページ番号を追加してMarpをさらに発表会資料っぽくしてみた

Marp（Markdown Presentation）とは

Markdown記法でプレゼン資料をつくれる便利なツール。
特にVSCodeで用意されているExtensionを使えば、リアルタイムにプレビューを確認しながら作業可能。
お気に入りは、Latex（厳密にはKatex）文法で数式をさくっと載せられる◎

Marpの基礎的なところはこの記事がとても参考になりました。
https://qiita.com/tomo_makes/items/aafae4021986553ae1d8

ちょっと困った

宗教上の理由で、プレゼンをつくるときは次の形式にしなければならない。

• ページの左下：『日付』
• ページの中央下：『発表会名』
• ページの右下：『ページ番号』（「現ページ番号/全ページ数」）

理想はこう

この後紹介するCSSで次のようになります。

デフォルトではこんな感じ

headerに日付、フッダーに発表名を入れてみました。

sample.md

---
marp: true
theme: footer_temp
header: "サンプル発表会"
footer: "2022/02/16"
paginate: true
---

# サンプル

CSSで頑張る

どうやら用意されている機能では実現できそうにないので、CSSで無理やり実現します。
長々と説明するほどのことでもないので、テーマCSSのfooter_temp.cssを先に紹介します。

footer_temp.css

/* @theme footer_temp */
@import 'default';

section {
	position: relative;
}

/* ページ番号 */
section::after {
    content: attr(data-marpit-pagination)" / "attr(data-marpit-pagination-total);
    font-size: 80%;
}

/* 発表会名 */
header {
    width: 100%;
	position: absolute;
    top: unset;
    bottom: 21px;
    left: 0;
    text-align: center;
    font-size: 80%;
}

/* 日付 */
footer {
	text-align: center;
    font-size: 80%;
}

• 発表会名（header）はpositionで左下に移動
• フッターはtext-alignで中央寄せ
• ページ番号は、HTMLを解析してみるとsection要素に「data-marpit-pagination-total」というメタ属性が入っていたのでそれを拾って追加