Obsidian上で定理型環境もどきを作る

定理型環境とは

数学的文章を書く場合、定理、命題、補題といった定理型環境の存在は欠かせません。しかしmarkdownには当然そのような機能は無いため、妥協して**定理**などで装飾したりします。HTMLのタグを用いてCSSでそれっぽく作ることもできますが、今度はその内部でmarkdownのパーサが走らず、数式がレンダリングされません。

さてObsidianのヘルプを漁ってたところ、Calloutsという機能を見つけました。これは引用ブロックの形で警告や注釈を加える機能ですが、拡張性が高くmarkdownも使えます。これが利用できそうです。

解決法

CSSスニペットに以下を加えます。

.callout {
    --title-margin: 0.25em;
    --theorem-color: 200, 0, 0;
    --theorem-bg-color: 200, 100, 100, 0.2;
}
/* 定理 theorem */
.callout[data-callout="theorem"] {
    background-color: rgba(var(--theorem-bg-color));
}
.callout[data-callout="theorem"]  .callout-icon {
    visibility: visible;
}
.callout[data-callout="theorem"]  .callout-icon svg {
    stroke: rgb(var(--theorem-color));
}
.callout[data-callout="theorem"].callout:not([data-callout-metadata~="title"]) .callout-title {
    visibility: hidden;
}
.callout[data-callout="theorem"].callout:not([data-callout-metadata~="title"]) .callout-icon::after {
    margin-left: var(--title-margin);
    content: "定理";
    font-weight: bold;
    color: rgb(var(--theorem-color));
}
.callout[data-callout="theorem"].callout[data-callout-metadata~="title"] .callout-title {
    visibility: visible;
    color: rgb(var(--theorem-color));
}
.callout[data-callout="theorem"].callout[data-callout-metadata~="title"] .callout-title-inner::before {
    content: "定理（"
}
.callout[data-callout="theorem"].callout[data-callout-metadata~="title"] .callout-title-inner::after {
    content: "）"
}

利用するときはmarkdownで以下のように記述します。

>[!theorem]
>インライン数式$y=f(x)$
>$$ \frac{d^{2}y}{dx}=6y^{2}+x $$

> [!theorem] タイトル無し
>インライン数式$y=f(x)$
>$$ \frac{d^{2}y}{dx}=6y^{2}+x $$

> [!theorem|title] タイトル有り
>インライン数式$y=f(x)$
>$$ \frac{d^{2}y}{dx}=6y^{2}+x $$

こんな感じに表示されます。propositionやlemmaなども自由に拡張できます。

問題点

問題というほどではないんですが、タイトル非表示の場合に「定理」とだけ表示させるため、Calloutの標準機能としてのタイトルを非表示にして、アイコンの後に表示しています。つまり「定理」はアイコンに属しており、たぶん構文的に良くありません。contentがうまく働かないため、このような実装になってます。