How can I customize python syntax highlighting in VS code?

Question

I installed Visual Studio Code with Anaconda, and want to customize syntax highlight. I’m using default dark theme and that’s good but colors of python built-in functions and methods aren’t.

I found ‘Developer : Generate Color Theme From Current Settings’ and tried to find where to change. (I’m not sure if it is right file to change colors of syntax highlight)

What should I do?

Asked By: JehunYoo

||

Source

Answer 1

In Visual Studio Code you can use color themes which are built-in, install new created by community and uploaded to Marketplace or edit allready existed. If you only want to customize a specific color of syntax e.g. function name, you need to edit settings.json file.

To do this go to File > Preferences > Settings > Workbench > Appearance and in sections Color Customizations click on Edit in settings.json

Now you need to specify what exactly you want customize by adding code in this file and just save it.

This code will change color of function name to orange:

"editor.tokenColorCustomizations": {
"functions": "#FF9900"

If you want to change some other settings e.g. variables, strings, numbers follow this pattern:

"editor.tokenColorCustomizations": {
"what_you_want_to_customize" : "hex_value_of_color"

If you want to change color when you call methods you need to specify scope (in the same settings.json file):

"editor.tokenColorCustomizations": {
        "textMateRules": [
            {
                "scope": "meta.function-call",
                "settings": {
                    "foreground": "#FF9900"
                }
            }

Now when you call function in some objects it will appear as orange color.

Here’s how it looks with pandas.DataFrame():

If you create your own method in objects it will also be color of your choice.

And this is how it looks when you combine this two settings.

I’ve just change color to red when function is created and orange when function is called for better explanation.

There is also official docs for further reading and much more settings to make it custom looks (text, bars, buttons).

Answered By: Stoockbroker

Answer 2

Correct form of Stoockbroker’s answer. (missing parentheses corrected.)

  "editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "scope": "meta.function-call.generic.python",
        "settings": {
          "foreground": "#FF0000"
        }
      }
    ]
  },

https://github.com/MagicStack/MagicPython/issues/127

Answered By: zoltron

Answer 3

I used this answer to create a copy of the carbon.now.sh "One Dark" theme for Python using VSCodium (VSCode sans Microsoft)

The theme results from this code in the settings.json file:

"workbench.colorCustomizations":
    {
        "editor.background": "#282C34"
    },
"editor.tokenColorCustomizations":
    {
        "textMateRules": 
            [
                {
                     "scope": "meta.function-call",
                     "settings":
                         {
                             "foreground": "#5BB6C1"
                         }
                },
                {
                     "scope": "string.quoted.single.python",
                     "settings": 
                         {
                             "foreground": "#94BC79"
                         }
                },
                {
                     "scope": "source.python",
                     "settings":
                         {
                         "foreground": "#DE6D77",
                         }
                }
            ]
        }

Here is the code sample I want to replicate, generated with carbon.now.sh:

:

The theme settings above helped me replicate it in VSCodium / VSCode for a project I am working for Frappe.

When combined with the CodeSnap Extension, you can create the same look as Carbon.now.sh, but offline:

This streamlined my productivity when creating documentation, videos with multiple code snippets. Plus I can type the useful code once, and not have to copy paste it elsewhere, or simply get a stylized image snippet of existing code.

Answered By: Tropicalrambler

Answer 4

Here a short and concise answer with an example.

You will have to edit settings.json.
To do that click: file->preferences->settings->workbench->color customizations (or simply search for ‘color customization’ in settings).

Within this json you will find "editor.tokenColorCustomizations" and "workbench.colorCustomizations". These nested JSONs are what you are looking for.

To understand how to customize every single token have a look to the amazing answer of Joey in this similar question.

But if you are lazy (like me) and does not want to read a lot, here a practical example. Just paste these two elements in the root json of settings.json to override the Dark theme. I commented the most important parts. Enjoy

"workbench.colorCustomizations": {
  "[*Dark*]": { // terminal colors
    "terminal.background": "#181818",
    "terminal.foreground": "#00ff00",
    "terminalCursor.background": "#D8D8D8",
    "terminalCursor.foreground": "#D8D8D8",
    "terminal.ansiBlack": "#181818",
    "terminal.ansiBlue": "#7CAFC2",
    "terminal.ansiBrightBlack": "#585858",
    "terminal.ansiBrightBlue": "#7CAFC2",
    "terminal.ansiBrightCyan": "#86C1B9",
    "terminal.ansiBrightGreen": "#A1B56C",
    "terminal.ansiBrightMagenta": "#BA8BAF",
    "terminal.ansiBrightRed": "#AB4642",
    "terminal.ansiBrightWhite": "#F8F8F8",
    "terminal.ansiBrightYellow": "#F7CA88",
    "terminal.ansiCyan": "#86C1B9",
    "terminal.ansiGreen": "#A1B56C",
    "terminal.ansiMagenta": "#BA8BAF",
    "terminal.ansiRed": "#AB4642",
    "terminal.ansiWhite": "#D8D8D8",
    "terminal.ansiYellow": "#F7CA88",
    // background
    "editor.background": "#0f0f0f",
    // brackets
    "editorBracketHighlight.foreground1": "#FAE734",
    "editorBracketHighlight.foreground2": "#DE6257",
    "editorBracketHighlight.foreground3": "#F58A6B",
    "editorBracketHighlight.foreground4": "#DE8657",
    "editorBracketHighlight.foreground5": "#FAA75A",
    "editorBracketHighlight.foreground6": "#abb2c0",
    // various errors
    "editorBracketHighlight.unexpectedBracket.foreground": "#ff0008",
    "editor.rangeHighlightBackground": "#ff0008",
  }
},
// custom
"editor.tokenColorCustomizations": {
  "[*Dark*]": {
    "strings": "#4AFF43",
    "numbers": "#1cdfdf",
    "functions": "#a856ff",
    "variables": "#F5AB76",
    "comments": "#1ABEE8",
    "textMateRules": [
      {
        // function parameters
        "scope": "variable.parameter",
        "settings": {
          "fontStyle": "",
          "foreground": "#F5762A"
        }
      },
      {
        // language constants such as bools
        "scope": "constant.language",
        "settings": {
          "fontStyle": "",
          "foreground": "#FF299E"
        }
      }
    ]
  }
},
"editor.semanticTokenColorCustomizations": {
  "enabled": true,
},

Answered By: Sonny Monti

How can I customize python syntax highlighting in VS code?

Question:

Answers: