VSCodeでMarkdown+TeXをhtmlエクスポートする

## 動機
本投稿の公開時点では、拡張機能を適用しても Markdown+ $\TeX$ の環境が不満。

|--|$\TeX$ マクロの共有|html 形式でエクスポート|Markdown ファイルのインクルード|
|--|--|--|--|
|VSCode の規定|ファイル内はブロック間で可能。ファイル間は `~/.config/Code/User/settings.json` ファイルの `"markdown.math.macros"` に記載。|不可|不可|
|主要な Markdown 拡張|ブロック間、ファイル間ともに不可|一部可能|一部可能|
|本投稿の対策後|エクスポート後の共有について、拡張をカスタマイズして実現|拡張の規定機能|拡張の規定機能|

## 解決策

- Markdown PDF拡張をインストール。
- Markdown PDF拡張は $\TeX$ 未サポートなのをいいことに、$\TeX$ マクロが共有できるよう、エクスポートhtmlのテンプレートをカスタマイズしながらサポートさせる。

`.vscode/extensions/yzane.markdown-pdf-1.5.0/template/template.html`
```html
<!DOCTYPE html>
<html>
<head>
<title>{{{title}}}</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
{{{style}}}
<!-- mermaidが不要なら、読み込みが遅いと思うのでコメントする。 -->
<!-- {{{mermaid}}} -->

<!-- 追加ここから -->
<!-- KaTeXリソース3個をCDNから取得。最新の定義は https://katex.org/docs/autorender を参照のこと。 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.21/dist/katex.min.css" integrity="sha384-zh0CIslj+VczCZtlzBcjt5ppRcsAmDnRem7ESsYwWwg3m/OaJ2l4x7YBZl9Kxxib" crossorigin="anonymous">
<!-- The loading of KaTeX is deferred to speed up page rendering -->
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.21/dist/katex.min.js" integrity="sha384-Rma6DA2IPUwhNxmrB/7S3Tno0YY7sFu9WSYMCuulLhIqYSGZ2gKCJWIqhBWqMQfh" crossorigin="anonymous"></script>
<!-- To automatically render math in text elements, include the auto-render extension: -->
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.21/dist/contrib/auto-render.min.js" integrity="sha384-hCXGrW6PitJEwbkoStFjeJxv+fSOOQKOPbJxSfM6G5sWZjAyWhXiTIIAmQqnlLlh" crossorigin="anonymous"></script>

<script>
// マクロをオブジェクトに、キー:値形式で保持する。
const macros = {
        // ~/.config/Code/User/settings.json ファイルの "markdown.math.macros" キーの値と同じ形式。容易に同期を取ることができる。
        "\\iv": "^{-1}", // 例
};
    document.addEventListener("DOMContentLoaded", function() {
        const makeIterable = function*(xpath) {
            const xPathResult = document.evaluate(xpath, document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
            for (let i = 0; i < xPathResult.snapshotLength; i++) {
              yield xPathResult.snapshotItem(i);
            }
        };
        // Markdown PDF 拡張でディスプレイ定義がこのxpathが示す要素に変換される。
        for (const e of makeIterable('//pre[@class="hljs"]/code/div')) {
            　const v = e.innerText.trim();
              // 中身がTeXであるか判定し、満たすならレンダリングする。
              // TeX 以外のプログラミング言語もこの要素になるため、あなたが利用する言語の種類により調整してください。
            　if (v.startsWith('\\') && v.includes('{') && v.includes('}')) {
                  katex.render(v, e, {
                    displayMode: true,
                    throwOnError: false,
                    macros: macros, // I/O :マクロが定義されるとこのオブジェクトに追加されるため、1個のmacrosオブジェクトを流用している。
                    globalGroup: true, // マクロ定義を外でも利用可能にするフラグ。
                  });
            　}
        }
        // インラインモードのTeX定義はauto-render.min.jsの機能を利用してレンダリングする。
        // 制限：インラインモードで定義したマクロが、ディスプレイ定義内で利用できない。
        renderMathInElement(document.body, {
          delimiters: [
              {left: '$', right: '$', display: false},
              // https://katex.org/docs/autorender にはディスプレイモードの定義があるが、Markdown PDF 拡張の動作と不整合なので、取り除く。
          ],
          throwOnError: false,
          output: "mathml",
          strict: false,
          macros: macros,
        });
    });
</script>
<!-- 追加ここまで -->

</head>
<body>
<!-- mermaidが不要なら、読み込みが遅いと思うのでコメントする。 -->
<!--
<script>
    mermaid.initialize({
      startOnLoad: true,
      theme: document.body.classList.contains('vscode-dark') || document.body.classList.contains('vscode-high-contrast')
          ? 'dark'
          : 'default'
    });
  </script>
-->
{{{content}}}
</body>
</html>
```