VSCodeのMarkdownで数式が書けてPDFにもできた！
コード書いとる？
VSCode 1.58でMarkdownのプレビューが数式に対応していたのでメモ。ここはnote。
Markdownのプレビュー機能
VSCodeにはいつの頃からか、編集中のMarkdownのリアルタイムプレビュー機能がついていました。
プレビューボタンをポチッとすると画面を２分割して右側にプレビューを表示してくれる。書類の見た目を常に確認しながら書けるのはありがたい...！
で！このプレビュー画面がversion 1.58からKaTeX対応を果たしたので数式が書ける！機能拡張でもありましたが...素のVSCodeでこれができるのありがたい。
ついでにコードブロックは言語指定ができるのね。言語に合わせたシンタックスハイライトありがたい...！
PDFに書き出す
機能拡張のMarkdown-PDFで書き出す場合、テンプレートに少し手を入れる必要がありました(これ以外の方法があったら知りたい！)
コマンドパレットで「Open Extension Folder」して、yzane.markdown-pdf-x.x.x → template → template.html を編集します。
このファイル内で、
{{{style}}}
{{{mermaid}}}直後に、次のテキストを挿入しておきます(KaTeXを使ったレンダリング用の指示)
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.0/dist/katex.min.css" integrity="sha384-9eLZqc9ds8eNjO3TmqPeYcDj8n+Qfa4nuSiGYa6DjLNcv9BtN69ZIulL9+8CqC9Y" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.0/dist/katex.min.js" integrity="sha384-K3vbOmF2BtaVai+Qk37uypf7VrgBubhQreNQe9aGsz9lB63dIFiQVlJbr92dw2Lx" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.0/dist/contrib/auto-render.min.js" integrity="sha384-kmZOZB5ObwgQnS/DuDg6TScgOiWWBiVt0plIRkZCmE6rDZGrEOQeHM5PcHi+nyqe" crossorigin="anonymous"></script>
<script>
document.addEventListener("DOMContentLoaded", () => {
renderMathInElement(document.body, {
delimiters: [
{ left: "$$", right: "$$", display: true },
{ left: "$", right: "$", display: false }
]
});
});
</script>これで準備完了！PDFとかHTMLで書き出した時に数式もいい感じにレンダリングされていると思います！
行列を書く時の注意点
$$
\begin{pmatrix}
a & b \\
c & d
\end{pmatrix}
\begin{pmatrix}
x \\
y
\end{pmatrix}
$$こんな感じで書いてプレビューを確認してPDFに書き出すと... なぜか数式のレンダリングに失敗します。これ理由はよくわかりませんが、改行を別の書き方にしたらうまくいきました。
$$
\begin{pmatrix}
a & b \cr
c & d
\end{pmatrix}
\begin{pmatrix}
x \cr
y
\end{pmatrix}
$$原因はわかりませんが...うまくレンダリングされたのでヨシ！
個人的にはこれで技術書が書けるぜー！ってテンション上がってますw
ではまた次回！
