(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 のフォーマットを自動調整(整形)
settings.json
)
2. 設定ファイルの調整(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
や拡張機能を活用すると快適になります。