VSCodeでMarkdownを快適に書く：スニペット・GitHub風デザイン・ショートカット変更

はじめに

VScodeには様々なマークダウン用の拡張機能がありますが、その拡張機能のショートカットを覚えるのが億劫に思ったので、スニペットを登録して書ける環境を作る方法を記載します。
Texでスニペットを使った方が慣れているという背景もあります。
この記事では以下の内容を記載しています。

• Vscodeでのマークダウン用のスニペットの設定
• Github風のwarningとnoteの表示方法
• Ctrl+Bでボールド体ではなく、Vscodeのエクスプローラを開く方法

スニペットの設定

1. 参考
   https://aadojo.alterbooth.com/entry/2023/01/16/110000

2. スニペットの作成

   • 適当なmdファイルを選択し開いた状態で、Vscodeの左下の歯車から"スニペット"を選択　もしくは
     VSCodeのメニューバーから[ファイル]→[ユーザー設定]→[ユーザースニペットの構成]に進む
   • 新しいスニペットファイル(markdown.jsonなど)を作成

3. スニペットへの追記
   私の使用しているマークダウン用

   markdown.json

   
      // 表のテンプレート
      "table": {
          "prefix": "table",
          "body": [
              "| $1 | $2 |",
              "| ------- | ------- | ",
              "| $3   | $4   |"
          ],
          "description": "Markdown の表テンプレート"
      },
      "Markdown Inline Code": {
          "prefix": "code",
          "body": [
              "`$1`"
          ],
          "description": "Markdown のコードブロック（言語指定）"
      },
      // コードブロック（言語指定あり）
      "Markdown Code Block": {
          "prefix": "codeblock",
          "body": [
              "```",
              "$2",
              "```"
          ],
          "description": "Markdown のコードブロック（言語指定）"
      },
   // 折りたたみ（トグル）
   "Markdown Toggle (details/summary)": {
   "prefix": "toggle",
   "body": [
   "",
   "$1",
   "$2",
   ""
   ],
   "description": "Markdown の折りたたみトグル"
   },
   // 引用
   "Markdown Blockquote": {
   "prefix": "quote",
   "body": [
   "> $1"
   ],
   "description": "Markdown の引用ブロック"
   },
   // リンク
   "Markdown Link": {
   "prefix": "link",
   "body": [
   "$1"
   ],
   "description": "Markdown のリンク"
   },
   // 画像
   "Markdown Image": {
   "prefix": "img",
   "body": [
   ""
   ],
   "description": "Markdown の画像挿入"
   },
   "Task List": {
   "prefix": "todo",
   "body": [
   "- [] $1"
   ],
   "description": "タスクリスト"
   },
   "Callout NOTE": {
   "prefix": "note",
   "body": [
   "> [!NOTE]",
   "> $1"
   ],
   "description": "GitHub Callout: NOTE"
   },
   "Callout TIP": {
   "prefix": "tip",
   "body": [
   "> [!TIP]",
   "> $1"
   ],
   "description": "GitHub Callout: TIP"
   },
   "Callout IMPORTANT": {
   "prefix": "important",
   "body": [
   "> [!IMPORTANT]",
   "> $1"
   ],
   "description": "GitHub Callout: IMPORTANT"
   },
   "Callout WARNING": {
   "prefix": "warning",
   "body": [
   "> [!WARNING]",
   "> $1"
   ],
   "description": "GitHub Callout: WARNING"
   },
   "Callout CAUTION": {
   "prefix": "caution",
   "body": [
   "> [!CAUTION]",
   "> $1"
   ],
   "description": "GitHub Callout: CAUTION"
   },
   "Line": {
   "prefix": "line",
   "body": [
   "---"
   ],
   "description": "区切り線"
   }
   

4. markdownのスニペットの有効化

   • 初期設定ではmarkdownのスニペットはオンになっていない
   • setting.jsonファイルに以下を追記

   "[markdown]":  {
   "editor.wordWrap": "on",
   "editor.quickSuggestions": {
       "comments": "on",
       "strings": "on",
       "other": "on"
   },
   "editor.snippetSuggestions": "top"
   }
   

5. スニペットの使用
   適当なmarkdownファイルでtableと入力すれば候補が出るはず

Github風のwarningとnoteの表示方法

1. 拡張機能をインストール
   Markdown Preview Enhanced または Markdown Preview Github Styling
2. Markdown Preview Github Styling の場合
   インストール後、VSCode のプレビュー（Ctrl+Shift+V）で GitHub のCSSが適用されます
   ただし > [!NOTE] などの callout はCSS定義が無いため、そのままだと普通の引用表示
3. Markdown Preview Enhanced + カスタムCSS の場合
   Ctrl+Shift+P → 「Markdown Preview Enhanced: Customize CSS」を開く
   style.less に GitHub風 callout CSS を追加

   blockquote:has(> p:has(> strong:contains("[!NOTE]"))) {
   border-left: 4px solid #0969da;
   background-color: #f6f8fa;
   padding: 0.5em 1em;
   }
   blockquote:has(> p:has(> strong:contains("[!WARNING]"))) {
     border-left: 4px solid #d1242f;
     background-color: #fff5f5;
     padding: 0.5em 1em;
   }
   

Ctrl+Bでボールド体ではなく、Vscodeのエクスプローラを開く方法

1. 参考: https://qiita.com/kinchiki/items/dabb5c890d9c57907503
2. shift+cmd+p でコマンドパレットを開き、Preferences: Open Keyboard Shortcuts を選択してキーバインド一覧を表示
3. "bold"と検索して、設定されているキーバインドを右クリックで削除（右クリック>キーバインドの削除）