概要
Markdown ファイルを vscode の拡張機能 Markdown PDF で pdf や html に変換できるが，以下の問題点がある．本記事ではこれらを解決する方法を紹介する（先人たちの記事の内容をまとめただけです）．
- 数式が使えない（ $ で囲った文字列）
- デザインが気に入らない（GitHub に近づけたい）
数式に対応
参考：VSCode の Markdown で数式を表示して PDF 化する - Qiita
- vscode の拡張機能である
Markdown+MathとMarkdown PDFをインストール -
Ctrl + Shift + Pでコマンドパレットを開いてExtensions: Open Extensions Folderを入力して拡張機能フォルダを開く -
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
- vscode の拡張機能である
Markdown PDFをインストール -
このリポジトリから
github-markdown.cssをダウンロードする - 2 でダウンロードした CSS ファイルで
.markdown-をすべて空文字に置換する -
Ctrl + ,で設定を開いてmarkdown-pdf.stylesと入力し，3 の CSS ファイルのパスを指定する