Tips of Markdown PDF on VSCode

VSCodeの拡張機能Markdown PDFのカスタム設定についてのメモ。

GitHubのスタイルを適用

github.com (accessed on 2022/07/31)

github-markdown.cssをダウンロードしてきて、適当なディレクトリ(~/.vscode/css)に配置。

全ての.markdown-を空文字で置き換える。

VSCodeのsettings.jsonに以下を追加。

  "markdown-pdf.styles": [
      "path/to/github-markdown.css",
  ],

ハイライトスタイルの変更

ハイライトもGitHubスタイルに合わせる。

VSCodeのsettings.jsonに以下を追加。

"markdown-pdf.highlightStyle": "github.css"

KaTeXレンダリング

PreviewでKaTeXレンダリングしている数式をHTMLやPDFにする際にもレンダリングする。

適当なディレクトリにKaTeXを読み込むHTML(katex.html)を用意する。

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css"
  integrity="sha384-n8MVd4RsNIU0tAv4ct0nTaAbDJwPJzDEaqSD1odI+WdtXRGWt2kTvGFasHpSy3SV"
  crossorigin="anonymous"
/>

<!-- The loading of KaTeX is deferred to speed up page rendering -->
<script
  defer
  src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"
  integrity="sha384-XjKyOOlGwcjNTAIQHIpgOno0Hl1YQqzUOEleOLALmuqehneUG+vnGctmUb0ZY0l8"
  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.9/dist/contrib/auto-render.min.js"
  integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05"
  crossorigin="anonymous"
  onload='renderMathInElement(document.body, {delimiters: [{ left: "$$", right: "$$", display: true },{ left: "$", right: "$", display: false },{ left: "\\[", right: "\\]", display: true }]});'
></script>

作成したkatex.htmlをmarkdown-in-includeを使ってドキュメントの先頭で読み込む。

:[KaTeX](path/to/katex.html)

Content of README

katex.org (accessed on 2022/07/31) github.com (accessed on 2022/07/31) nshi.jp (accessed on 2022/07/31)

既知の問題

\\ is replaced by \

改行とかで困る。

\begin{align}
f(x) &= x^2 + 3 \\\\
f'(x) &= 2x
\end{align}

$$ block is not rendered

<div>で囲ったらレンダリングされるようになった。

<div>
\begin{align}
f(x) &= x^2 + 3 \\\\
f'(x) &= 2x
\end{align}
</div>

改ページ

<div style="page-break-before:always"></div>または<div class="page"></div>。