Zenn
🐈

VSCodeにおけるMarkdown上の画像をhtml形式に変更するショートカットの作成方法

2025/02/22に公開
VS Code
Markdown
tech

概要

VSCodeでMarkdownを作成する際に、クリップボード等の画像を貼り付けると下記のように表示されてしまい、画像サイズの指定ができない。そのため2つ目のような感じに置換するショートカットの登録方法を解説します。

![画像.jpg](***.jpg)

<img src="***.jpg" width="300">

結論

VSCodeを開き、ctrl+shift+pでコマンドパレットを開き、「キーボードショートカットを開く(JSON)」を開く。

次の内容を追記すると、ctrl+shift+rで置換可能な状態となる。

[
    // markdownの画像をhtml形式に変換するショートカット
    {
        "key": "ctrl+shift+r",
        "command": "editor.actions.findWithArgs",
        "when": "editorTextFocus",
        "args": {
            "searchString": "!\\[画像\\.jpg\\]\\((.*?\\.jpg)\\)",
            "replaceString": "<img src=\"$1\" width=\"300\">",
          "isRegex": true
        }
    }
]

補足

ショートカットを使えるタイミングを調整したい場合には、when引数を変更してください。参考サイトの説明はこちら。日本語化したものは、付録をご参照ください。

参考サイト

付録

ChatGPTでAvailable context keysを日本語に変換した表

コンテキスト名 条件が真となる場合
エディタ関連のコンテキスト
editorFocus エディタがフォーカスされている場合（テキストまたはウィジェット）。
editorTextFocus エディタ内のテキストがフォーカスされている場合（カーソルが点滅している）。
textInputFocus 任意のエディタがフォーカスされている場合（通常のエディタ、デバッグREPLなど）。
inputFocus 任意のテキスト入力エリアがフォーカスされている場合（エディタやテキストボックス）。
editorTabMovesFocus Tabキーでエディタ外にフォーカスを移動できる場合。
editorHasSelection エディタ内でテキストが選択されている場合。
editorHasMultipleSelections 複数のテキスト領域が選択されている場合（複数カーソル）。
editorReadonly エディタが読み取り専用の場合。
editorLangId エディタに関連付けられた言語IDが一致する場合。例: "editorLangId == typescript"。
isInDiffEditor アクティブなエディタが差分エディタの場合。
isInEmbeddedEditor 埋め込みエディタ内でフォーカスされている場合。
OS関連のコンテキスト
isLinux OSがLinuxの場合。
isMac OSがmacOSの場合。
isWindows OSがWindowsの場合。
isWeb Webからエディタにアクセスしている場合。
リスト関連のコンテキスト
listFocus リストがフォーカスされている場合。
listSupportsMultiselect リストが複数選択をサポートしている場合。
listHasSelectionOrFocus リストに選択またはフォーカスがある場合。
listDoubleSelection リストに2つの要素が選択されている場合。
listMultiSelection リストに複数の要素が選択されている場合。
モード関連のコンテキスト
inSnippetMode エディタがスニペットモードになっている場合。
inQuickOpen Quick Open ドロップダウンがフォーカスされている場合。
リソース関連のコンテキスト
resourceScheme リソースの Uri スキームが一致する場合。（例: "resourceScheme == file"）
resourceFilename エクスプローラーまたはエディタのファイル名が一致する場合。（例: "resourceFilename == gulpfile.js"）
resourceExtname エクスプローラーまたはエディタのファイル名拡張子が一致する場合。（例: "resourceExtname == .js"）
resourceDirname エクスプローラーまたはエディタのリソースの絶対フォルダパスが一致する場合。（例: "resourceDirname == /users/alice/project/src"）
resourcePath エクスプローラーまたはエディタのリソースの絶対パスが一致する場合。（例: "resourcePath == /users/alice/project/gulpfile.js"）
resourceLangId エクスプローラーまたはエディタのタイトルの言語IDが一致する場合。（例: "resourceLangId == markdown"）
isFileSystemResource エクスプローラーまたはエディタのファイルが、ファイルシステムプロバイダーで扱えるファイルシステムリソースである場合。
resourceSet エクスプローラーまたはエディタのファイルが設定されている場合。
resource エクスプローラーまたはエディタのファイルの完全な Uri。
エクスプローラー関連のコンテキスト
explorerViewletVisible エクスプローラービューが表示されている場合。
explorerViewletFocus エクスプローラービューがキーボードフォーカスされている場合。
filesExplorerFocus ファイルエクスプローラーセクションがキーボードフォーカスされている場合。
openEditorsFocus 「OPEN EDITORS」セクションがキーボードフォーカスされている場合。
explorerResourceIsFolder エクスプローラーでフォルダが選択されている場合。
エディタウィジェット関連のコンテキスト
findWidgetVisible エディタの検索ウィジェットが表示されている場合。
suggestWidgetVisible サジェストウィジェット（インテリセンス）が表示されている場合。
suggestWidgetMultipleSuggestions 複数のサジェスト（提案）が表示されている場合。
renameInputVisible 名前変更用の入力テキストボックスが表示されている場合。
referenceSearchVisible 「Peek References」ウィンドウが開いている場合。
inReferenceSearchEditor 「Peek References」ウィンドウ内のエディタがフォーカスされている場合。
config.editor.stablePeek ピークエディタを開いた状態に保つ設定（editor.stablePeek）が有効な場合。
codeActionMenuVisible コードアクションメニューが表示されている場合。
parameterHintsVisible パラメータヒントが表示されている場合（editor.parameterHints.enabled設定によって制御）。
parameterHintsMultipleSignatures 複数のパラメータヒントが表示されている場合。
デバッガー関連のコンテキスト
debuggersAvailable 適切なデバッガー拡張機能が利用可能な場合。
inDebugMode デバッグセッションが実行中の場合。
debugState アクティブなデバッガーの状態の場合。可能な値は inactive, initializing, stopped, running。
debugType デバッグタイプが一致する場合。（例: "debugType == 'node'"）
inDebugRepl デバッグコンソール REPL にフォーカスがある場合。
統合ターミナル関連のコンテキスト
terminalFocus 統合ターミナルにフォーカスがある場合。
terminalIsOpen 統合ターミナルが開かれている場合。
タイムラインビュー関連のコンテキスト
timelineFollowActiveEditor タイムラインビューがアクティブなエディタを追従している場合。
タイムラインビュー項目関連のコンテキスト
timelineItem タイムラインの項目のコンテキスト値が一致する場合。（例: "timelineItem =~ /git:file:commit\b/"）
拡張機能関連のコンテキスト
extension 拡張機能のIDが一致する場合。（例: "extension == eamodio.gitlens"）
extensionStatus 拡張機能がインストールされている場合。（例: "extensionStatus == installed"）
extensionHasConfiguration 拡張機能に設定項目がある場合。
グローバルUI関連のコンテキスト
notificationFocus 通知がキーボードフォーカスされている場合。
notificationCenterVisible 通知センターがVS Codeの右下に表示されている場合。
notificationToastsVisible 通知トーストがVS Codeの右下に表示されている場合。
searchViewletVisible 検索ビューが開かれている場合。
sideBarVisible サイドバーが表示されている場合。
sideBarFocus サイドバーがフォーカスされている場合。
panelFocus パネルがフォーカスされている場合。
inZenMode ウィンドウがZenモードになっている場合。
isCenteredLayout エディタが中央レイアウトモードになっている場合。
workbenchState ワークベンチの状態（空、フォルダ（1フォルダ）、またはワークスペース）。
workspaceFolderCount ワークスペースフォルダの数。
replaceActive 検索ビューで置換テキストボックスが開かれている場合。
view コマンドを表示するビューの場合。（例: "view == myViewsExplorerID"）
viewItem ツリーアイテムのcontextValueが一致する場合。（例: "viewItem == someContextValue"）
webviewId コマンドを表示するWebview IDの場合。（例: "webviewId == catCoding"）
isFullscreen ウィンドウがフルスクリーンの場合。
focusedView 現在フォーカスされているビューの識別子。
canNavigateBack 戻る操作が可能な場合。
canNavigateForward 進む操作が可能な場合。
canNavigateToLastEditLocation 最後に編集した場所への移動が可能な場合。
グローバルエディタUI関連のコンテキスト
textCompareEditorVisible 少なくとも1つの差分（比較）エディタが表示されている場合。
textCompareEditorActive 差分（比較）エディタがアクティブな場合。
editorIsOpen エディタが1つ以上開かれている場合。
groupEditorsCount グループ内のエディタ数。
activeEditorGroupEmpty アクティブなエディタグループにエディタがない場合。
activeEditorGroupIndex エディタグループの位置を反映する番号（1から開始）。グリッドの左上隅にあるグループは1となる。
activeEditorGroupLast グリッド内で最後のエディタグループの場合、真となる。
multipleEditorGroups 複数のエディタグループが存在する場合。
activeEditor グループ内でアクティブなエディタの識別子。
activeEditorIsDirty グループ内でアクティブなエディタに未保存の変更がある場合。
activeEditorIsNotPreview グループ内でアクティブなエディタがプレビューモードではない場合。
activeEditorIsPinned グループ内でアクティブなエディタが固定されている場合。
inSearchEditor 検索エディタ内でフォーカスされている場合。
activeWebviewPanelId 現在アクティブなWebviewパネルのID。
activeCustomEditorId 現在アクティブなカスタムエディタのID。
設定関連のコンテキスト
config.editor.minimap.enabled 設定 editor.minimap.enabled が有効な場合、真となる。

Discussion