環境・前提条件
- エディタ: Visual Studio Code
- 拡張機能: markdown-pdf(yzane 作)
- OS: macOS / Linux / Windows(いずれも共通)
問題
Markdown を PDF に変換すると、バッククォートで囲んだインラインコード(例:Get-Service)が 黄土色(#C9AE75) で出力さます。ディスプレイ上では問題ないのですがmarkdown-pdfのデフォルトで印刷すると、薄い文字となってドキュメントとしては非常に読みにくくなる問題があります。
原因
markdown-pdf のデフォルト CSS に以下の記述があります。
/* for inline code */
:not(pre):not(.hljs) > code {
color: #C9AE75; /* Change the old color so it seems less like an error */
font-size: inherit;
}
インラインコードに #C9AE75(黄土色)が明示的に指定されているため、変換後のPDFでも黄土色で表示されます。
コメントに「エラーっぽく見えないよう色を変えた」とある通り、意図的な設定ですが、印刷や白背景のPDFでは視認性が低くなります。
解決方法:カスタム CSS で上書きする
1. カスタム CSS ファイルを作成する
任意の場所にCSSファイルを作成します。
作成場所の例:
-
~/.config/markdown-pdf-custom.css(ユーザー共通設定として使いたい場合) -
.vscode/markdown-pdf.css(プロジェクト単位で管理したい場合)
/* インラインコードの文字色を読みやすい色に変更 */
:not(pre):not(.hljs) > code {
color: #333333; /* 通常の黒に近い色 */
background-color: #f0f0f0; /* 薄いグレー背景(任意) */
padding: 1px 4px;
border-radius: 3px;
font-size: inherit;
}
色の代替案:
| 用途 | カラーコード |
|---|---|
| 黒系(最も無難) | #333333 |
| 赤系(Bootstrap風) | #c7254e |
| 青系(GitHub風) | #0550ae |
| デフォルトに近いが見やすく | #7d5200 |
2. settings.json で CSS を指定する
markdown-pdf.styles 設定にカスタム CSS ファイルのパスを指定します。
絶対パスで指定する場合
// .vscode/settings.json またはユーザー設定
{
"markdown-pdf.styles": [
"/Users/your_username/.config/markdown-pdf-custom.css"
]
}
Markdown ファイルからの相対パスで指定する場合
markdown-pdf.stylesRelativePathFile を true にすると、Markdown ファイルが置かれているディレクトリからの相対パスで指定できます。
{
"markdown-pdf.stylesRelativePathFile": true,
"markdown-pdf.styles": [
"markdown-pdf.css"
]
}
この場合、Markdown ファイルと同じディレクトリに markdown-pdf.css を配置します。プロジェクトごとにスタイルを切り替えたい場合に便利です。
3. PDF を再生成して確認
コマンドパレット(Cmd+Shift+P / Ctrl+Shift+P)を開き、「Markdown PDF: Export (pdf)」 を実行して PDF を再生成します。
ポイント:CSS はなぜ上書きできるのか
markdown-pdf のデフォルトスタイルは 置き換えではなく追記 されます。
そのため、セレクタが同一または詳細度が高ければカスタム CSS が優先されます。
デフォルトの :not(pre):not(.hljs) > code をそのままカスタム CSS でも使うことで、確実に上書きできます。
/* デフォルトと同じセレクタで上書き → 後から読み込まれるため優先される */
:not(pre):not(.hljs) > code {
color: #333333;
}
まとめ
| 手順 | 内容 |
|---|---|
| 原因の特定 | デフォルト CSS で color: #C9AE75 が明示指定されている |
| CSS ファイル作成 | 同セレクタで color を上書き |
| settings.json 設定 |
markdown-pdf.styles にパスを追加 |
| PDF 再生成 | コマンドパレットから Export |