Markdown Preview Enhanced スタイル設定まとめ¶

📁 docs/dev-environment/artifact/markdown-preview-enhanced-styles.md

作成日: 2026-03-23

概要¶

Markdown Preview Enhanced (MPE) のプレビューには複数レイヤーのスタイルが重なって適用される。 優先度の高い順に以下の通り。

[拡張機能デフォルトスタイル]
   ↓
[プレビューテーマCSS]  ← markdown-preview-enhanced.previewTheme
   ↓
[コードブロックテーマCSS]  ← markdown-preview-enhanced.codeBlockTheme
   ↓
[グローバルカスタムCSS]  ← ~/.crossnote/style.less
   ↓
[ワークスペースカスタムCSS]  ← .crossnote/style.less（プロジェクトルート）

インストール済み拡張機能¶

現在の設定¶

VSCode設定 (C:\Users\kazuma\AppData\Roaming\Code\User\settings.json)¶

MPE専用の設定は明示的に記述なし → すべてデフォルト値が適用されている。

注意: markdown.styles に /Users/kazuma/repos/MyLab/docs/dev-environment/vscode-markdown-styles/markdown.css が設定されているが、これはビルトインMarkdownプレビュー用であり、MPEには適用されない。また、Mac形式のパスなのでWindows環境では機能していない。

スタイルファイルの場所と役割¶

1. 拡張機能デフォルトスタイル¶

場所: C:\Users\kazuma\.vscode\extensions\shd101wyy.markdown-preview-enhanced-0.8.22\crossnote\styles\

2. プレビューテーマ（preview_theme/）¶

場所: C:\Users\kazuma\.vscode\extensions\shd101wyy.markdown-preview-enhanced-0.8.22\crossnote\styles\preview_theme\

本文・見出し・テーブル・リンクなど全体のデザインを制御する。

現在適用中のテーマ詳細（github-light.css）¶

/* 主要スタイル定義 */
html body {
  font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  background-color: #fff;
}

/* 見出し */
h1 { font-size: 2.25em; font-weight: 300; padding-bottom: 0.3em; }
h2 { font-size: 1.75em; font-weight: 400; padding-bottom: 0.3em; }
h3 { font-size: 1.5em;  font-weight: 500; }
h4 { font-size: 1.25em; font-weight: 600; }
h5 { font-size: 1.1em;  font-weight: 600; }
h6 { font-size: 1em;    font-weight: 600; color: #5c5c5c; }

/* リンク */
a { color: #08c; text-decoration: none; }
a:hover { color: #00a3f5; }

/* ブロッククォート */
blockquote {
  margin: 16px 0;
  padding: 0 15px;
  color: #5c5c5c;
  background-color: #f0f0f0;
  border-left: 4px solid #d6d6d6;
}

/* コードブロック */
code {
  font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
  font-size: 0.85em;
  color: #000;
  background-color: #f0f0f0;
  border-radius: 3px;
}

/* テーブル */
table th { font-weight: 700; color: #000; }
table td, table th { border: 1px solid #d6d6d6; padding: 6px 13px; }

/* 水平線 */
hr { height: 4px; background-color: #d6d6d6; }

3. コードブロックテーマ（prism_theme/）¶

場所: C:\Users\kazuma\.vscode\extensions\shd101wyy.markdown-preview-enhanced-0.8.22\crossnote\styles\prism_theme\

現在は auto.css（テーマ自動選択）が適用されている。

ユーザーカスタムスタイル¶

グローバルカスタムCSS¶

場所: C:\Users\kazuma\.crossnote\style.less

現在の内容（テンプレートのみ、カスタム記述なし）:

/* Please visit the URL below for more information: */
/*   https://shd101wyy.github.io/markdown-preview-enhanced/#/customize-css */

.markdown-preview.markdown-preview {
  // ここにカスタムスタイルを記述
  // 例: background-color: blue;
}

変更方法: VSCodeでコマンドパレット → Markdown Preview Enhanced: Customize CSS を実行

グローバルカスタム設定ファイル群¶

場所: C:\Users\kazuma\.crossnote\

config.js の現在の内容¶

({
  katexConfig: { "macros": {} },
  mathjaxConfig: { "tex": {}, "options": {}, "loader": {} },
  mermaidConfig: { "startOnLoad": false }
})

ワークスペースカスタムCSS¶

プロジェクトルートに .crossnote/style.less を作成するとそのプロジェクト限定で適用される。

変更方法: コマンドパレット → Markdown Preview Enhanced: Customize CSS (Workspace)

ビルトインMarkdownプレビューのスタイル（MPEとは別）¶

VSCodeのビルトインプレビューにはMPEのテーマは適用されない。 こちらは markdown.styles 設定で制御する。

プロジェクト内のスタイルファイル: docs/dev-environment/vscode-markdown-styles/

注意: settings.jsonのmarkdown.stylesのパスがMac形式（/Users/kazuma/...）のため、Windows環境では現在機能していない。正しいパスは D:/Kazuma_Teramachi/MyLab/docs/dev-environment/vscode-markdown-styles/markdown.css。

スタイルをカスタマイズする方法¶

方法1: グローバルカスタムCSS（推奨）¶

1. コマンドパレット（Ctrl+Shift+P）を開く
2. Markdown Preview Enhanced: Customize CSS を実行
3. ~/.crossnote/style.less が開く
4. .markdown-preview.markdown-preview { } 内に記述

.markdown-preview.markdown-preview {
  // 例: フォントサイズ変更
  font-size: 15px;

  // 例: コードブロックの背景色変更
  pre { background-color: #282c34; }
}

方法2: プレビューテーマの変更¶

1. VSCode設定を開く（Ctrl+,）
2. markdown-preview-enhanced.previewTheme を検索
3. ドロップダウンから選択

方法3: フロントマターで個別指定¶

マークダウンファイルの先頭に記述することでファイル単位でテーマを変更できる。

---
markdown:
  image_dir: /assets
html:
  embed_local_images: false
export_on_save:
  html: true
---

参考リンク¶

• 公式ドキュメント - CSS カスタマイズ
• 公式ドキュメント - テーマ