VS Code: Markdownでテキストをハイライトするスニペット設定

VS Codeのマークダウンファイルで、選択したテキストをタグで囲んでハイライト表示するためのスニペット設定方法。

スニペットの設定

1. スニペットファイルを開く

Ctrl+Shift+P (Windows/Linux) または Cmd+Shift+P (Mac)
"Configure User Snippets" を選択
"markdown.json" を選択

2. スニペットを追加

markdown.json に以下を追加：

{
    "Highlight with mark": {
        "prefix": "mark",
        "body": "<mark>$TM_SELECTED_TEXT$1</mark>$0",
        "description": "Wrap selection with mark tag"
    }
}

スニペットの説明

prefix: mark - スニペットを呼び出すキーワード
body: $TM_SELECTED_TEXT$1$0 - 選択テキストをmarkタグで囲む
- $TM_SELECTED_TEXT - 選択されたテキストを挿入
- $1 - 最初のカーソル位置（タグの内側）
- $0 - 最終カーソル位置（タグの外側）
description: スニペットの説明文

使い方

手動での使用

ハイライトしたいテキストを選択
コマンドパレットを開く: Ctrl+Shift+P (Win) / Cmd+Shift+P (Mac)
"Insert Snippet" と入力して選択
"Highlight with mark" を選択
選択したテキストが テキスト で囲まれる

実行例

Before:

これは重要なテキストです

"重要な"を選択してスニペット実行後:

これは<mark>重要な</mark>テキストです

Stream Deckへの割り当て

Stream Deckを使えば、ボタン一つでハイライトを適用できます。

方法1: マルチアクション（推奨）

Stream Deckのマルチアクション機能で以下を順番に実行：

System > Hotkey: Ctrl+Shift+P を送信（コマンドパレット起動）
System > Text: Insert Snippet をタイプ
System > Hotkey: Enter を送信
System > Text: Highlight with mark をタイプ
System > Hotkey: Enter を送信

方法2: VS Code拡張機能を使用

VS Code拡張機能「Command Runner」などを使用して、カスタムコマンドを作成し、Stream Deckから呼び出す方法もあります。

Stream Deckボタンの設定例

アイコン: 蛍光ペンや黄色のハイライトアイコン
ラベル: "Highlight" または "Mark"
フォルダ: "VS Code" または "Markdown"

キーボードショートカット（オプション）

Stream Deckを使わない場合、キーボードショートカットも設定可能です。

keybindings.jsonに追加

Ctrl+Shift+P → "Preferences: Open Keyboard Shortcuts (JSON)"
以下を追加：

{
  "key": "ctrl+alt+h",
  "command": "editor.action.insertSnippet",
  "when": "editorTextFocus",
  "args": {
    "snippet": "<mark>$TM_SELECTED_TEXT</mark>"
  }
}

使い方: テキストを選択 → Ctrl+Alt+H

注意点

既存のショートカットと競合しないキーを選んでください：

Ctrl+Shift+H → 既に「置換」に割り当て済み
Ctrl+Shift+M → 「問題パネル表示」に割り当て済みの可能性
Ctrl+Alt+H → 比較的競合が少ない

まとめ

スニペットを設定することで、選択テキストを効率的にタグで囲める
Stream Deckを使えば、マウス・キーボード操作なしでハイライト可能
マークダウンファイルでの文書作成効率が大幅に向上