(Markdown)Visual Studio Code で Markdown を記述する環境設定 - tsukimisoba/Blog GitHub Wiki

2025/05/28 記載
Visual Studio Code で Markdown を記述するための環境設定を、構造的に説明します。

1. 拡張機能の導入

Markdown の記述を効率化するため、以下の拡張機能をインストールします：

• Markdown All in One：ショートカットやプレビュー機能を強化
• Markdown Preview Enhanced：拡張プレビュー機能やカスタム CSS サポート
• vscode-icons：アイコンセットを追加し、ファイル構造を視覚的にわかりやすく
• Prettier：Markdown のフォーマットを自動調整（整形）

2. 設定ファイルの調整（settings.json）

Visual Studio Code の設定を settings.json で調整します。具体的には：

{
  "editor.wordWrap": "bounded",
  "editor.renderWhitespace": "all",
  "markdown.preview.fontSize": 14,
  "markdown.preview.lineHeight": 1.6,
  "markdown.styles": ["file:///C:/Users/User/custom-markdown.css"],
  "editor.formatOnSave": true,
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

この設定で、行の折り返しやプレビューのフォントサイズ、カスタム CSS の適用が可能になります。

3. キーバインドのカスタマイズ

Markdown 編集の効率を上げるために、ショートカットキーを keybindings.json で設定：

[
  {
    "key": "ctrl+b",
    "command": "markdown.extension.editing.toggleBold",
    "when": "editorTextFocus && editorLangId == 'markdown'"
  },
  {
    "key": "ctrl+i",
    "command": "markdown.extension.editing.toggleItalic",
    "when": "editorTextFocus && editorLangId == 'markdown'"
  }
]

これにより、Ctrl+B で太字、Ctrl+I で斜体を簡単に適用できます。

4. Markdown のプレビュー設定

Ctrl+Shift+V で Markdown のプレビューを表示できますが、より詳細なカスタマイズも可能：

• ライブプレビュー: Markdown Preview Enhanced 拡張機能でリアルタイム表示
• GitHub スタイル: markdown.styles に CSS を追加し、GitHub ライクな見た目を実現
• エクスポート: PDF や HTML への変換も可能（拡張機能の利用）

5. 便利な Markdown ツール

• Mermaid: フローチャートやシーケンス図を Markdown で描画
• PlantUML: UML 図を Markdown 内に記述（VS Code に拡張機能を追加）
• MathJax: 数式表記（LaTeX 風）を Markdown で使用可能

Markdown は設定次第で大きくカスタマイズできるので、settings.json や拡張機能を活用すると快適になります。