つくたろうのブログ

ポケモン色違い厳選や国立大学巡りが好きな大学生、つくたろうの気ままな雑記帳です。当サイトは広告を含みます。

【VSCode】Markdownで、選択範囲を任意の文字列で囲むショートカットを作る。

www.tsukutarou.net
www.tsukutarou.net

こんにちは、つくたろうです。

今回はタイトルの通り、「VSCodeでMarkdownを書くときに、『ドラッグして選択した範囲を任意のタグで囲む』という処理をするショートカットの作成」について記事を書いていきたいと思います。

www.tsukutarou.net

はじめに

僕はブログを始めた当初から記事をMarkdownで書いているのですが、つい最近「VSCode」に乗り換えました。

理由としては、はてなブログの標準エディタではMarkdownの時に「太字」などのショートカットが効かないために、これらの使えるVSCodeを導入しようと思い立ったからです。(もともと大学の課題などでVSCodeは使っていたので、導入といっても拡張機能「Markdown All in One」をインストールしただけですが)

Markdownの.mdのファイルで書けば、Githubなどでの管理も簡単にできるというメリットもありますね。
www.tsukutarou.net

さて、このVSCodeでMarkdownを書いているときに「Ctrl+B」で太字ができるようになったのはいいものの、「ほかの機能(ショートカット)が無い」と気づきました。

具体的にはサイズ変更や色替えなどです。

いちいちタグをコピペしていては元も子もないな…と思い、選択した部分を任意の文字列で囲むことのできるショートカットを自作することにしました。

実際にできるようになったので、具体的な処理を備忘録的に残しておきたいと思います。

www.tsukutarou.net

やったことの流れ

処理の流れとしては、以下のようにやりました。

①:選択した範囲を「任意の文字列で囲む」スニペットを作成

②:先ほど作成したスニペットを呼び出せるようなショートカットを作成

恐ろしいほど面白味のない愚直な手段ですが、結局これが手っ取り早くて楽なんですよね。

具体的なコード

先の①、②をそれぞれ以下のように実装しました。

選択した範囲を「任意の文字列で囲む」スニペットを作成

まず、「Ctrl」+「Shift」+「P」でコマンド入力欄を開き、そこに「snippet」と入力

そうすると「ユーザ スニペットの構成」という項目が表示されるので、それを選択。

続いて「markdown」と入力。「markdown.json」というファイルがあるので、それを選択して開く。

開いた画面に、以下のようにスニペットを記述し、保存。

 "hogehoge": {
     "prefix": "hoge", 
     "body": "囲い(前)${TM_SELECTED_TEXT}囲い(後)"
 }

記述内容について具体的に説明すると、"hogehoge"という名前のスニペットを作成し、その処理として${TM_SELECTED_TEXT}という部分を"囲い(前)""囲い(後ろ)"という部分で囲ませた状態のものに書き換えているということになります。

ここで、${TM_SELECTED_TEXT}というのが「ドラッグして選択している部分」を指しているので、結果的に「選択部分を『囲い(前)』と『囲い(後ろ)』で囲む」という処理をさせるようになっています。

作成したスニペットを呼び出せるようなショートカットを作成

さて、続いては先ほど作ったスニペットをショートカットで呼び出せるようにします。

まず先ほどと同じように「Ctrl」+「Shift」+「P」でコマンド入力欄を開き、そこに「keyboard」と入力して「キーボード ショートカットを開く(JSON)」を開きます。

そしてそこに、以下のように記述して保存します。

 {
     "key": "割り当てたいキー",
     "command": "editor.action.insertSnippet",
     "args": {"langId": "markdown","name": "hogehoge"}  
 }

"key"には割り当てたいショートカットを入力しますが、既にあるものと競合したくない場合は先のコマンド入力欄で同じように「keyboard」と入力し、今度は「『既定の』キーボード ショートカットを開く(JSON)」を開き、「Ctrl」+「F」などでそのキーが使われていないかどうかを検索してから設定すると良いと思います。

また、"args""hogehoge"には先ほど設定したスニペットの名前を設定しましょう。

これで、Markdownの編集画面で設定したショートカットキーを押せば先ほどの処理ができるようになりました。

実装結果

上記のようにスニペットとそれを呼び出すショートカットを設定して、以下のようなことができるようになりました。

以下のGIFは選択した範囲を"めちゃくちゃ"。女神様。で囲むという頭の悪いショートカットです。

f:id:tsukutarou:20211009054824g:plain
頭の悪いショートカット

簡単に囲むことができていることが分かりますね。

この文字列はなんでもいいので、よく使うタグなどを設定しておけばいつでも簡単に呼び出すことができるようになります。

また、必要な数だけスニペットとショートカットを設定できるのもありがたいですね。

「色やサイズを与えるタグを色やサイズ別に設定する」などの小回りが利くようになります。
www.tsukutarou.net

おわりに

今回は、「VSCodeでMarkdownを記述する際に選択部分を任意の文字列で囲むショートカットの設定」についての記事でした。

VSCodeはかなり使いやすいので、はてなブログを標準エディタで書いている方は是非使ってみてはいかがでしょうか。

こういった技術的な記事は書いていて楽しいので、これからも書いていきたいと思います。

ここまで読んでくれて、ありがとうございました!

www.tsukutarou.net

2021/10/09 つくたろう


大学生ランキング