divタグ内で数式がレンダリングできなくて、いろいろと調べた。エスケープが処理される順序の問題だった。
まずは普通にMarkdownに記述する: \\(\pi\\) → \(\pi\)
続いて、インラインで処理されるHTMLタグ内に記述する: <span>\\(\pi\\)</span> → \(\pi\)
次がうまくいかない例。ブロックで処理されるHTML内に記述する:
<div>
\\(\pi\\)
</div>
↓
\\(\pi\\)
先に結論を書くと、エスケープを\\から\に変えると、数式が有効になる。
<div>
\(\pi\)
</div>
↓
\(\pi\)
昨日のトートロジーのメモで、恒新式の定義をちょっとおしゃれなボックスに入れて描こうとしたらうまくいかなかったので調べた、という経緯。
これは、HugoのMarkdownからHTMLを生成するパイプライン処理の順序の問題で、HugoがrawHTMLを処理するとき、エスケープを処理するかしないか。それにより、数式エンジンが反応するかどうか。このサイトの場合は、\(\KaTeX\)のAuto-render Extensionのdelimiterが反法するかどうか。
なお、{{< shortcode >}}の場合は、出力を markdownify すれば、通常のMarkdownと同じ扱い。つまり、\\(\pi\\)で良い。
まとめるとこんな感じ
| Markdown | 呼び出し方 | Hugo出力 | レンダリング | |
|---|---|---|---|---|
\\(\pi\\) | 通常の段落 | \(\pi\) | される | |
\\(\pi\\) | <div> の中 (rawHTML) | \\(\pi\\) | されない | |
\(\pi\) | <div> の中 (rawHTML) | \(\pi\) | される | |
\\(\pi\\) | shortcode内で .Inner | markdownify | \(\pi\) | される |
