mdファイルを読みやすいPDFにするメモ

目的

mdで書かれたドキュメント（設計書とか）をいつでも読みやすいようpdf化する。
作業環境はWindows。
実験では、画像が入っているmdがきれいにpdfで読めるかは未検証。

事前準備

• wkhtmltoxをインストール（PATHを通す）
• pandocをインストール（PATHを通す）

やってみる

操作手順

• cssファイルを作る
• pandocコマンドで変換

今回は、適当にanthropicのxlsxのSKILL.mdでやってみた。
また、個人的な趣味でフォントはHackgenで統一。

pandoc SKILL.md -o SKILL.pdf --pdf-engine=wkhtmltopdf --css=style.css `
  --pdf-engine-opt=-T --pdf-engine-opt=15mm `
  --pdf-engine-opt=-B --pdf-engine-opt=15mm `
  --pdf-engine-opt=-L --pdf-engine-opt=22mm `
  --pdf-engine-opt=-R --pdf-engine-opt=22mm `
  --pdf-engine-opt=--header-spacing --pdf-engine-opt=0 `
  --pdf-engine-opt=--footer-center --pdf-engine-opt="[page] - [topage]" `
  --pdf-engine-opt=--footer-font-name --pdf-engine-opt="HackGen" `
  --pdf-engine-opt=--footer-font-size --pdf-engine-opt=9 `
  --pdf-engine-opt=--footer-spacing --pdf-engine-opt=2

使ったcssファイル

@page {
    margin-top: 5mm;
    margin-bottom: 5mm;
    margin-left: 5mm;
    margin-right: 5mm;
}

body {
    font-family: "HackGen", "HackGen35", "HackGen35 Console", sans-serif;
    font-size: 11pt;
    line-height: 1.3;
    color: #333;
    padding: 0;
}

/* 見出し */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 600;
    margin-top: 1.8em;
    margin-bottom: 0.6em;
    line-height: 1.3;
}

h1 {
    font-size: 1.8em;
    border-bottom: 1px solid #ddd;
    padding-bottom: 0.3em;
}

h2 {
    font-size: 1.5em;
    border-bottom: 1px solid #eee;
    padding-bottom: 0.2em;
}

h3 {
    font-size: 1.3em;
}

/* 段落 */
p {
    margin: 0.8em 0;
}

/* リンク */
a {
    color: #0066cc;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* インラインコード */
code {
    font-family: "HackGen Console", "HackGen35 Console", monospace;
    background: #f3f3f3;
    padding: 2px 4px;
    border-radius: 4px;
    font-size: 0.95em;
}

/* コードブロック */
pre {
    background: #f3f3f3;
    padding: 1em;
    border-radius: 6px;
    overflow-x: auto;
    font-family: "HackGen Console", "HackGen35 Console", monospace;
    font-size: 0.95em;
    line-height: 1.55;
}

/* 引用 */
blockquote {
    border-left: 4px solid #ddd;
    padding-left: 1em;
    color: #666;
    margin: 1em 0;
}

/* 表 */
table {
    border-collapse: collapse;
    margin: 1em 0;
    width: 100%;
}

th,
td {
    border: 1px solid #ddd;
    padding: 6px 10px;
}

th {
    background: #f9f9f9;
    font-weight: 600;
}

/* 箇条書き */
ul,
ol {
    margin: 0.8em 0 0.8em 0.75em;
}

li {
    margin: 0.3em 0;
}

/* 画像 */
img {
    max-width: 100%;
}

結果

いい感じ、かつ、フォントもサブセット埋め込みになった。