つくたろうのブログ

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

【VSCode】Markdownで選択したテキストを色付け・サイズ変更するショートカットについて解説

www.tsukutarou.net
www.tsukutarou.net

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

今回は「VSCodeでMarkdownを記述しているときに、『ドラッグして選択したテキストに任意の色をつける』という処理をするショートカット」について解説します。

また、同じやり方で「サイズ変更するショートカット」もできるのでそちらも解説します。

やりたいこと

MarkdownをVSCodeで書くときに、何らかのショートカットキーを押す操作で、「選択した範囲のテキスト」に色を付けるという操作をしたい。

Markdownでの「色付け」なので、具体的には<span style='color: #ff0000;'></span>といったタグで選択部分を囲むショートカットが欲しい。

つまり、以下のように選択した部分を、
f:id:tsukutarou:20211010001438p:plain

ショートカットキーを押すだけで一発で以下の状態になるようにしたいということですね。
f:id:tsukutarou:20211010001435p:plain

はてなブログの標準エディタではMarkdownでショートカットが使えないのでVSCodeに乗り換えたものの、「Markdown All in One」には「色やサイズを与えるショートカット」がないために、せっかくなので「よく使う色・サイズのタグをショートカットに入れておいて一発で呼び出す」という設定をしてブログ執筆の効率を上げていきましょうということですね。

徹底解説Visual Studio Code

徹底解説Visual Studio Code

Amazon

具体的な方針

先日公開した【VSCode】Markdownで、選択範囲を任意の文字列で囲むショートカットを作る。 - つくたろうのブログの記事で説明した手法を使って、選択範囲を「色を付けるタグ」で囲むスニペットを呼び出すショートカットを作ります。
www.tsukutarou.net

やり方の流れ自体は上の記事で紹介しているものと同じように、

①:選択したテキストを「設定したい色のタグで囲む」スニペットを作成

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

という流れになります。

www.tsukutarou.net

具体的な実装

実装は以下の通りになります。

選択したテキストを「設定したい色のタグで囲む」スニペットを作成

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

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

さらに「markdown」と入れて、表示される「markdown.json」というファイルを選択して開きます。

開いた画面に以下のようにコードを書いたら、保存しましょう。

今回は自分がブログでよく使う色として「(ff00000)」と「(0000cc)」を設定していますが、お好みで皆さんのよく使う色を設定してみて下さい。

 "red": { //スニペットの名前。色の名前をつけておくのが無難。
     "prefix": "red",
     "body": "<span style='color: #ff0000;'>${TM_SELECTED_TEXT}</span>"
 },

 "blue": {
     "prefix": "blue", 
     "body": "<span style='color: #0000cc;'>${TM_SELECTED_TEXT}</span>"
 }

これらのスニペットでは${TM_SELECTED_TEXT}というのが選択部分を示しており、スニペットを呼び出すと「選択部分を設定した<span>タグで囲んだものにテキストを変換する」という処理をしていることになります。

www.tsukutarou.net

作成したスニペットを呼び出すショートカットを作成

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

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

開いた画面に、下のようにコードを記述して保存しましょう。

 {
     "key": "「赤」に割り当てたいキー",//任意
     "command": "editor.action.insertSnippet",
     "args": {"langId": "markdown","name": "red"}  
 },

 {
     "key": "「青」に割り当てたいキー",//任意
     "command": "editor.action.insertSnippet",
     "args": {"langId": "markdown","name": "blue"}  
 }

ショートカットに割り当てるキーは、自分が使いやすいものを各自で設定してください。

すでに使われているショートカットを調べる場合は、先のコマンド入力欄で同じように「keyboard」と入力して表示される「既定のキーボード ショートカットを開く(JSON)」を選択すると一覧として見ることができます。

また、"args""name"に対する値には先ほど設定したスニペットの名前を設定しましょう。(上の例では"red""blue")などがそうですね。

こちらはスニペットの数だけ設定することができるので、使いたい色がたくさんある方もその都度設定しておけば一瞬で呼び出すことが可能になります。

色だけでなくサイズも設定可能

もちろんですが設定するタグはなんでもいいので、テキストサイズを指定するタグを設定することも可能です。

<span style="font-size: 120%"></span>といった<span>タグですね。

僕も「120%」「135%」「150%」あたりをよく使うので、これらを一発で呼び出せるようにしています。

具体的には以下のように設定していますので、参考にしていただければと思います。

markdown.json:

//markdown.json:スぺニットを記述

 "120%": {
     "prefix": "120%", 
     "body": "<span style=\"font-size: 120%\">${TM_SELECTED_TEXT}</span>"
 },

 "135%": {
     "prefix": "135%", 
     "body": "<span style=\"font-size: 135%\">${TM_SELECTED_TEXT}</span>"
 },

 "150%": {
     "prefix": "150%", 
     "body": "<span style=\"font-size: 150%\">${TM_SELECTED_TEXT}</span>"
 }

"body"内に"などの文字を入れる場合は、その都度エスケープして\"のようにすることを忘れないようにしましょう。

keybindings.json:

//keybindings.json:ショートカットを記述

 {
     "key": "ctrl+shift+1 ctrl+shift+2",
     "command": "editor.action.insertSnippet",
     "args": {"langId": "markdown","name": "120%"}  
 },

 {
     "key": "ctrl+shift+1 ctrl+shift+3",
     "command": "editor.action.insertSnippet",
     "args": {"langId": "markdown","name": "135%"}  
 },

 {
     "key": "ctrl+shift+1 ctrl+shift+5",
     "command": "editor.action.insertSnippet",
     "args": {"langId": "markdown","name": "150%"}  
 }

割り当てているキーは僕が使いやすいように当てているだけですので、皆さんの使いやすいように設定していただければと思います。

個人的に既存のキーと競合したくない思いが強かったので、絶対に被らないようなキーにしています(笑)

おわりに

今回は、MarkdownをVSCodeで書くときに、何らかのショートカットキーを押す操作で、「選択した範囲のテキスト」に色を付ける・サイズ変更をするという操作を実装するという記事でした。

はてなブログのMarkdownをVSCodeで書くときには「色替え」と「サイズ変更」は必須のショートカットですので、是非参考にしていただければと思います。

また、これを応用して様々なタグや操作を簡略化できるので、是非皆さんも自分なりのショートカットを作ってみてはいかがでしょうか。

これからもブログ作成を効率化できるような記事を書いていきますので、よろしくお願いします!

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

2021/10/10 つくたろう

カテゴリ:


大学生ランキング

www.tsukutarou.net

www.tsukutarou.net