Marpで影響範囲をできるだけ狭めて脚注を実現する方法 #CSS

MarpはCommonMarkを尊重しているので¹、基本機能のみで脚注を表現することができません。
ここではマークアップしやすくかつ利用頻度が低いであろう三重引用を脚注用に転用し、脚注に見えるスタイルを与えることで簡易的に脚注を実現します。

実現方法

blockquote > blockquote > blockquoteセレクタ（Markdownでは>>> ）に以下のスタイルを適用します。三重引用を引用文のマークアップとして使えなくなる代わりに脚注としてのマークアップに利用します。
脚注への参照を表すためにはKaTeXの上付き文字表記 $^1$ を利用しています。<sup>タグでもよいでしょう。
この場合、擬似的な脚注であるため $^1$ として記述した参照から脚注へのリンクは張られません。同一ページに納めることが多いと想定されますので、問題になることはないと考えています。

スライドの全体で利用するため、原稿となるMarkdownファイルにstyleグローバルディレクティブでCSSを記述します²。
よく使うようであればテーマファイルに記述してしまっても良いでしょう。テーマの作成方法は本稿では割愛します。

記述例

スライド原稿MarkdownファイルのYAMLグローバルディレクティブ

style: |
  /* 三重引用を脚注の記号に転用 */
  /* 下記はdefaultテーマ用。他のテーマで利用するときはbottomとleftを調節してください。 */
  /* スライド全体で利用するため、無名のstyleタグを利用しています。 */
  blockquote > blockquote > blockquote {
    font-size: 50%;
    font-weight: 400;
    padding: 0;
    margin: 0;
    border: 0;
    border-top: 0.1em dashed #555;
    position: absolute;
    bottom: 70px;
    left: 70px;
  }

## 正規表現(regular expression)とは
> ある特定のパターンを持つ文字列を指定する表記法の一つ。文字列の検索や置換、抽出などを行う際の対象の指定などのために用いられる。$^1$

>>> 1: IT用語辞典 e-Words https://e-words.jp/w/%E6%AD%A3%E8%A6%8F%E8%A1%A8%E7%8F%BE.html
>>> 2: 2行目の例

図：脚注の例

応用

三重引用ではスライドに必要な表現ができない場合は、五重引用や六重引用などを脚注スタイルにすることで回避できます。

参考にした記事

Introduction
https://marpit.marp.app/

Marpで研究発表スライドを作る〜Beamerを卒業しよう〜
https://zenn.dev/hellorusk/articles/4edf3920dd1a35