1
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

持ってる知識全般を棚卸するAdvent Calendar 2023

Day 1

VScodeのエディタの文字色を変えてmarkdownを書きやすくする

Last updated at Posted at 2023-11-30

背景

image-1.png
デフォルトの青文字だと見ずらいし,
見出しや太字でそれぞれ違う色の方が分かりやすいなと不満に思うようになった.
そこで,見出しを緑・太字を赤にして,自分の見やすいように文字色を上書きで変更をしようと思った.
方法に関して調べても意外と出てこないので,環境設定メモの一部として残しておこうと思う.

方法:「基本設定:ユーザー設定を開く(JSON)」に色指定を記述

  1. コマンドパレットを開く(Ctrl+shift+P)

  2. "user json"と検索して,「基本設定:ユーザー設定を開く(JSON)」をクリック
    image-2.png

  3. Json形式で以下を追記する.

{
    ###他の"editor.***"とかある部分###
    "editor.tokenColorCustomizations": {
        "textMateRules": [
        {
            "scope": ["markup.bold"],
            "settings": {
            "foreground": "#F55F49" // md太字の色
            }
        },
        {
            "scope": ["markup.heading"],
            "settings": {
            "foreground": "#52FA62" //mdヘッダーの色
            }
        },
        {
            "scope": ["markup.fenced_code.block.markdown"],
            "settings": {
            "foreground": "#69dfff" //mdブロック
            }
        }
        ]
    } 
} 

それぞれ,「scope」を指定して,対象のscopeの部分のみ色を変える仕様.
上記の例で行くと,マークダウンの見出しは"markup.heading"に当たる.

補足

カラーコードでの設定が面倒

色が表示されてる四角にカーソルを乗せると,カラーパレットから指定できるのでそっちの方が楽.
image.png

scope名を探すのが面倒

  1. コマンドパレットを開く(Ctrl+shift+P)

  2. "dev scope"で検索して「開発者:エディタートークンとスコープの検査」をクリック
    image-3.png

  3. スコープを知りたい部分にカーソルを合わせる
    image-4.png

上記の例では,斜体(イタリック体)にカーソルを合わせている.
斜体のスコープは,markup.italicとなり,見出し同様設定の変更が可能.

1
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?