visual-studio-code

Is there any way to change background color of comments in VScode?


I would like to change the color of the comments so that it can be highlighted. I prefer to change background-color most of the time. I found the color setting in setting.json. it looks like this.

"editor.tokenColorCustomizations": {
    "textMateRules": [
        {
            "scope": "comment",
            "settings": {
                "fontStyle": "bold",
                "foreground": "#FFD83B"
            }
        }
    ]
}

It does change but it seems like there is no "background" option in "settings". it says "Token background colors are currently not supported." so I only can change the text color, not the background. is there any way I can set background color of comments in VSCode?


Solution

  • There isn't any way to do that built-in. You could look through the extensions - search for comment - to see if any of them do that.

    Alternatively, one way to do it would be to use an extension like highlight. You can style anything you can capture with a regex. In settings.json:

    "highlight.regexes": {
    
     "(//\\s*)(\\sTODO\\s)(\\s*?:?)(.*)": [
       {},
       {
        "overviewRulerColor": "#ffcc00", // does this work?
        // "backgroundColor": "#aaa",
        "color": "#fff",
        "fontWeight": "bold",
        "letterSpacing": "2.5px",
        "outline": "1px solid #aaa",
        // "border": "1px solid #fff",
        // "before": {
        //   "backgroundColor": "#fff",
        //   "contentText": " *** ",
        //   "fontWeight": "bold",
        //   "margin": "10px"
        //   // "width": "20px"
        // }
       },
       {},
       {
        "color": "#999",
        "fontStyle": "italic",
        "letterSpacing": "1px"
       }
     ],
    
     "(//\\s*)(-+\\s+//)": [
       {
        "color": "#000",
        "backgroundColor": "#aaa",
        "outline": "2px solid #aaa",
        "fontWeight": "bold",
       },
       {
        "overviewRulerColor": "#ffcc00",
        "backgroundColor": "#aaa",
        "color": "#000",
        "fontWeight": "bold",
        // "letterSpacing": "2.5px",
        "outline": "2px solid #aaa",
        // "border": "1px solid #fff",
        // "before": {
        //   "backgroundColor": "#fff",
        //   "contentText": " *** ",
        //   "fontWeight": "bold",
        //   "margin": "10px"
        //   // "width": "20px"
        // }
       },
     ]
    },
    

    yields:

    highlight demo

    For styling options, see https://code.visualstudio.com/api/references/vscode-api#DecorationRenderOptions