VS CodeのMarkdownプレビューの背景色を変更する方法｜ダーク・ライトテーマに合わせるコツ

プログラミング・IT

「VS CodeでMarkdownプレビューを使っているけど、プレビューの背景が真っ白で目が痛い」
「エディタのテーマ（ダーク）に合わせたい」
と思ったことはありませんか？

VS CodeのMarkdownプレビューは、エディタ本体のテーマに連動しますが、カスタムCSSや設定でさらに細かく調整することもできます。

この記事では、VS CodeでMarkdownプレビューの背景色をテーマや自分好みに合わせる方法 をわかりやすく解説します。

スポンサーリンク

Markdownプレビューの背景色の基本

プレビューはテーマに自動で連動

VS CodeのデフォルトのMarkdownプレビューは、エディタのテーマと連動します：

  • ダークテーマ: プレビューもダーク背景
  • ライトテーマ: プレビューも白背景
  • ハイコントラストテーマ: 対応する配色

テーマの変更方法

基本的なテーマ変更

Ctrl + K → Ctrl + T（Windows/Linux）
Command + K → Command + T（Mac）

で好きなテーマ（例：Dark+、Light+、Monokai）を選んでください。プレビューも自動で同じ背景色になります。

人気のダークテーマ例

  • Dark+ (default dark): VS Code標準ダークテーマ
  • One Dark Pro: Atomエディタ風
  • Dracula: 紫系のポピュラーテーマ
  • Night Owl: 深夜作業に最適
  • Tokyo Night: 落ち着いた色合い

人気のライトテーマ例

  • Light+ (default light): VS Code標準ライトテーマ
  • GitHub Light: GitHubライク
  • Quiet Light: 優しい色合い
  • Winter is Coming: 淡いブルー系

プレビューの表示方法

サイドプレビュー

Ctrl + K V（Windows/Linux）
Command + K V（Mac）

エディタの横にプレビューを表示します。

プレビューのみ表示

Ctrl + Shift + V（Windows/Linux）
Command + Shift + V（Mac）

プレビューのみをタブで開きます。

標準プレビューのカスタマイズ

markdown.stylesを使った方法

VS Codeの標準Markdownプレビューでは、markdown.styles設定でCSSファイルを指定できます。

設定手順

  1. CSSファイルの作成

プロジェクトフォルダまたは任意の場所にmarkdown-custom.cssを作成：

/* ダークテーマ用カスタマイズ */
body {
    background-color: #1e1e1e !important;
    color: #d4d4d4 !important;
    font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

/* 見出しの色調整 */
h1, h2, h3, h4, h5, h6 {
    color: #569cd6 !important;
    border-bottom: 1px solid #404040;
    padding-bottom: 0.3em;
}

/* コードブロックの背景 */
pre {
    background-color: #2d2d30 !important;
    border: 1px solid #404040;
    border-radius: 4px;
    padding: 16px;
    overflow: auto;
}

/* インラインコードの背景 */
code {
    background-color: #2d2d30 !important;
    color: #f8f8f2 !important;
    padding: 2px 4px;
    border-radius: 3px;
}

/* 引用の装飾 */
blockquote {
    border-left: 4px solid #569cd6;
    background-color: #2a2d2e;
    padding: 10px 20px;
    margin: 0;
    font-style: italic;
}

/* テーブルの装飾 */
table {
    border-collapse: collapse;
    width: 100%;
    margin: 15px 0;
}

th, td {
    border: 1px solid #404040;
    padding: 8px 12px;
    text-align: left;
}

th {
    background-color: #2d2d30;
    font-weight: bold;
}

/* リンクの色 */
a {
    color: #4fc3f7 !important;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}
  1. settings.jsonでの設定

VS Codeの設定（Ctrl + ,）で「settings.json」を開き、以下を追加：

{
    "markdown.styles": [
        "file:///C:/path/to/your/markdown-custom.css"
    ]
}

パスの指定方法

Windows
"markdown.styles": [
    "file:///C:/Users/username/Documents/markdown-custom.css"
]
Mac/Linux
"markdown.styles": [
    "file:///Users/username/Documents/markdown-custom.css"
]
相対パス（プロジェクト内）
"markdown.styles": [
    "./styles/markdown-custom.css"
]

ライト用カスタマイズ例

ライトテーマ向けのCSS例：

/* ライトテーマ用カスタマイズ */
body {
    background-color: #fafafa !important;
    color: #333333 !important;
    font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

h1, h2, h3, h4, h5, h6 {
    color: #2c3e50 !important;
    border-bottom: 2px solid #ecf0f1;
}

pre {
    background-color: #f8f9fa !important;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    padding: 16px;
}

code {
    background-color: #f1f3f4 !important;
    color: #c7254e !important;
    padding: 2px 4px;
    border-radius: 3px;
}

blockquote {
    border-left: 4px solid #3498db;
    background-color: #f8f9fa;
    padding: 10px 20px;
    margin: 0;
}

Markdown Preview Enhancedでのカスタマイズ

Markdown Preview Enhanced (MPE) の導入

インストール方法

  1. VS Codeの拡張機能から「Markdown Preview Enhanced」を検索
  2. Yiyi Wangが開発したものをインストール
  3. 再起動後に利用可能

MPEの利点

  • 豊富なカスタマイズオプション: CSS、テーマ、プラグイン
  • 高度な機能: 数式、図表、プレゼンテーション機能
  • エクスポート機能: PDF、HTML、画像への出力

MPEでのカスタムスタイル設定

方法1: 設定ファイルによる指定

settings.jsonに以下を追加：

{
    "markdown-preview-enhanced.enableTypographer": true,
    "markdown-preview-enhanced.scrollSync": true,
    "markdown-preview-enhanced.liveUpdate": true,
    "markdown-preview-enhanced.previewTheme": "github-dark.css"
}

方法2: カスタムCSSファイルの作成

MPE専用のカスタムCSSを作成：

/* MPE用ダークテーマカスタマイズ */
.markdown-preview.markdown-preview {
    background-color: #0d1117;
    color: #c9d1d9;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

.markdown-preview.markdown-preview h1,
.markdown-preview.markdown-preview h2,
.markdown-preview.markdown-preview h3,
.markdown-preview.markdown-preview h4,
.markdown-preview.markdown-preview h5,
.markdown-preview.markdown-preview h6 {
    color: #f0f6fc;
    border-bottom-color: #21262d;
}

.markdown-preview.markdown-preview code {
    background-color: #161b22;
    color: #f85149;
    border-radius: 6px;
    padding: 2px 6px;
}

.markdown-preview.markdown-preview pre {
    background-color: #0d1117;
    border: 1px solid #30363d;
    border-radius: 6px;
    padding: 16px;
}

.markdown-preview.markdown-preview blockquote {
    border-left: 4px solid #30363d;
    background-color: #161b22;
    padding: 0 16px;
    color: #8b949e;
}

.markdown-preview.markdown-preview table {
    border-collapse: collapse;
    border-spacing: 0;
}

.markdown-preview.markdown-preview table th,
.markdown-preview.markdown-preview table td {
    border: 1px solid #30363d;
    padding: 6px 13px;
}

.markdown-preview.markdown-preview table th {
    background-color: #161b22;
    font-weight: 600;
}

方法3: プリセットテーマの利用

MPEには複数のプリセットテーマが用意されています：

{
    "markdown-preview-enhanced.previewTheme": "atom-dark.css",
    // または
    "markdown-preview-enhanced.previewTheme": "github-light.css",
    // または
    "markdown-preview-enhanced.previewTheme": "vue.css"
}

高度なカスタマイズテクニック

複数CSSファイルの併用

複数のCSSファイルを組み合わせて使用：

{
    "markdown.styles": [
        "./styles/base.css",
        "./styles/code-highlight.css",
        "./styles/custom-colors.css"
    ]
}

条件分岐スタイル

メディアクエリを使用した環境別スタイル：

/* プリント用スタイル */
@media print {
    body {
        background-color: white !important;
        color: black !important;
        font-size: 12pt;
    }
}

/* 画面幅による調整 */
@media (max-width: 768px) {
    body {
        padding: 10px;
        font-size: 14px;
    }
}

/* ダークモード検出 */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #1a1a1a;
        color: #e1e1e1;
    }
}

フォントのカスタマイズ

日本語フォントを含む設定：

body {
    font-family: 
        "Hiragino Kaku Gothic ProN",
        "ヒラギノ角ゴ ProN W3",
        "游ゴシック Medium",
        "Yu Gothic Medium",
        "メイリオ",
        Meiryo,
        "MS Pゴシック",
        sans-serif;
    font-feature-settings: "palt";
}

/* コードフォント */
pre, code {
    font-family: 
        "Fira Code",
        "Source Code Pro",
        "Monaco",
        "Consolas",
        "Liberation Mono",
        monospace;
    font-feature-settings: "liga";
}

設定の管理とバックアップ

ワークスペース設定

プロジェクトごとに異なる設定を使用する場合：

// .vscode/settings.json
{
    "markdown.styles": [
        "./docs/styles/project-specific.css"
    ]
}

Git管理での注意点

CSSファイルをプロジェクトに含める場合の.gitignore設定：

# VS Code設定は除外
.vscode/settings.json

# ただしMarkdownスタイルは共有
!.vscode/markdown-styles/

設定の同期

VS Code Settings Syncを使用して、複数環境で同じ設定を共有：

  1. Ctrl + Shift + P → 「Settings Sync: Turn On」
  2. GitHubアカウントでサインイン
  3. 設定の自動同期が有効化

よくある問題と対処法

CSSが適用されない場合

原因1: パスの指定ミス

確認方法:

  • ファイルパスが正確か確認
  • スラッシュの向き（Windows: \、Mac/Linux: /）

対処法:

// 絶対パスで指定
"markdown.styles": ["file:///C:/full/path/to/style.css"]

原因2: CSS優先度の問題

対処法:

/* !important を使用 */
body {
    background-color: #1e1e1e !important;
}

原因3: キャッシュの問題

対処法:

  1. VS Codeを再起動
  2. Ctrl + Shift + P → 「Developer: Reload Window」

プレビューが真っ白になる場合

確認ポイント

  1. CSSファイルの構文エラー: セミコロンやカッコの不備
  2. 文字エンコーディング: UTF-8で保存されているか
  3. ファイルの読み込み権限: アクセス権限の確認

デバッグ方法

開発者ツールでCSSを確認：

  1. プレビュー画面で右クリック → 「検証」
  2. Consoleタブでエラーメッセージを確認
  3. Elementsタブで適用されているCSSを確認

パフォーマンスの問題

重いCSSの対策

/* 不要なアニメーションを削除 */
* {
    transition: none !important;
    animation: none !important;
}

/* 重い影効果を軽量化 */
.shadow-heavy {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

よくある質問

Q: チーム開発でスタイルを統一するには？

A: プロジェクトの.vscode/settings.jsonにMarkdownスタイルを設定し、CSSファイルもプロジェクトに含めて共有します。

{
    "markdown.styles": ["./docs/styles/team-markdown.css"]
}

Q: エクスポート時（PDF出力時）も同じスタイルを適用するには？

A: MPEを使用し、エクスポート専用のCSSを設定します：

{
    "markdown-preview-enhanced.printBackground": true,
    "markdown-preview-enhanced.pdfEngine": "puppeteer"
}

Q: 画像の表示サイズも調整できますか？

A: CSSで画像サイズを制御できます：

/* 画像サイズ制限 */
img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 特定の画像のみ小さく */
img[alt*="small"] {
    max-width: 300px;
}

Q: 数式の表示色も変更できますか？

A: MPEを使用している場合、数式のスタイルも調整可能：

/* KaTeX数式のスタイル */
.katex {
    color: #c9d1d9 !important;
}

.katex .base {
    color: inherit;
}

まとめ

VS CodeのMarkdownプレビューの背景色を変更する方法は以下の通りです：

基本的な方法

  • VS Codeのテーマ変更: Ctrl + K → Ctrl + Tでプレビューも自動連動
  • markdown.styles設定: カスタムCSSファイルで詳細調整

高度な方法

  • Markdown Preview Enhanced: より豊富なカスタマイズオプション
  • 複数CSSファイル併用: 機能別にCSSを分割管理
  • 条件分岐スタイル: 環境やデバイスに応じた最適化

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

タイトルとURLをコピーしました