(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 や拡張機能を活用すると快適になります。