0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

markdown-pdf のインラインコードが見えにくい問題をカスタム CSS で解決する

0
Posted at

環境・前提条件

  • エディタ: 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.stylesRelativePathFiletrue にすると、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

参考

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?