はじめに

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

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

スニペットの設定

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

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

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": "区切り線"
}

markdownのスニペットの有効化

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

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

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

Github風のwarningとnoteの表示方法

拡張機能をインストール
Markdown Preview Enhanced または Markdown Preview Github Styling
Markdown Preview Github Styling の場合
インストール後、VSCode のプレビュー（Ctrl+Shift+V）で GitHub のCSSが適用されます
ただし > [!NOTE] などの callout はCSS定義が無いため、そのままだと普通の引用表示

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のエクスプローラを開く方法

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