概要

Markdown ファイルを vscode の拡張機能 Markdown PDF で pdf や html に変換できるが，以下の問題点がある．本記事ではこれらを解決する方法を紹介する（先人たちの記事の内容をまとめただけです）．

数式が使えない（ \$ で囲った文字列）
デザインが気に入らない（GitHub に近づけたい）

数式に対応

参考：VSCode の Markdown で数式を表示して PDF 化する - Qiita
1. vscode の拡張機能である Markdown+Math と Markdown PDF をインストール
2. Ctrl + Shift + P でコマンドパレットを開いて Extensions: Open Extensions Folder を入力して拡張機能フォルダを開く
3. markdown-pdf-x.x.x/template/template.html を次のように変更する（私の環境で一番上のディレクトリ名は yzane.markdown-pdf-1.4.4 だった）

markdown-pdf-x.x.x/template/template.html

<!DOCTYPE html>
<html>
<head>
<title>{{{title}}}</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
{{{style}}}
<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>
</head>
<body>
{{{content}}}
</body>
</html>

GitHub 風にする

参考：MarkdownをGitHub風のPDFに変換する - Qiita
1. vscode の拡張機能である Markdown PDF をインストール
2. このリポジトリから github-markdown.css をダウンロードする
3. 2 でダウンロードした CSS ファイルで .markdown- をすべて空文字に置換する
4. Ctrl + , で設定を開いて markdown-pdf.styles と入力し，3 の CSS ファイルのパスを指定する

Markdown を数式対応した GitHub 風のデザインの PDF に変換する

概要

数式に対応

GitHub 風にする