DevSecOps Solutions - Group home

Customizing themes for SQL syntax highlighting for Db2 for z/OS in Visual Studio Code

By Kendrick Ren posted Tue August 18, 2020 11:07 AM

  

By Brian Tsao and Kendrick Ren

Syntax highlighting is a common feature of many text editors that assists the human reader by making keywords visually distinct from surrounding code. The feature does not affect the meaning of the keywords highlighted but instead serves to reinforce it. IBM Db2 for z/OS Developer Extension supports syntax highlighting for structured Db2 SQL syntax. You can customize the highlighting theme by using Microsoft's Visual Studio Code (VS Code).

Customizable scopes

Syntax elements of the same type are scoped to ensure flexible and consistent customization of themes used in highlighting the syntax. When you change the theme for a scope, your changes are applied to all members within that scope. The scopes used in Db2 Developer Extension are:

keyword.other.sql.control - This scope contains keywords that dictate what the SQL is doing.
keyword.other.sql.general - This scope contains keywords that are part of the SQL syntax dictated by the control keyword.
keyword.other.sql.verb - This scope contains keywords that are child verbs to the SQL syntax dictated by the control keyword.
keyword.other.sql.common - This scope contains keywords that are part of SQL syntaxes and are commonly shared across different SQL types.


Customizing colour themes for each scope using VS Code

1. Open your user and workspace settings by using the following VS Code menu command:
  • On Windows/Linux - File > Preferences > Settings
  • On macOS - Code > Preferences > Settings

2. Access token customization by entering token color customization in the search field.
3. Select Editor: Token Color Customizations (There may be an Edit in settings.json option)

4. Add the following fields to settings.json if they haven't been added:
    "editor.tokenColorCustomizations": {
                 "textMateRules": []
     }

5. Add text mate rule objects to the array for each scope that you want to customize.
For example, the following text mate rule object customizes the keyword.other.sql.control scope:   
          {         
                  "scope": "keyword.other.sql.control",         
                  "settings": {                   
                         "foreground": "#c586c0"         
                   }   
          }

customizing_theme.gif
Tip: Hovering cursor over the hex colour code in VS Code should bring up a colour picker.

The following example customizes all of the available scopes within Db2 Developer Extension:
settings.json

    "editor.tokenColorCustomizations": {
           "textMateRules": [
                  {
                       "scope": "keyword.other.sql.control",
                       "settings": {
                            "foreground": "#c586c0"
                       }
                  },
                  {
                         "scope": "keyword.other.sql.general",
                         "settings": {
                               "foreground": "#d6a956"
                         }
                  },
                  {
                       "scope": "keyword.other.sql.verb",
                       "settings": {
                             "foreground": "#a53834"
                       }
                 },
                 {
                        "scope": "keyword.other.sql.common",
                        "settings": {
                              "foreground": "#569cd6"
                        }
                 }
           ]
    }


The following example shows the look and feel after applying the colour theme:
Look_and_feel.png

References

  • VS Code settings documentation: https://code.visualstudio.com/docs/getstarted/settings
  • VS Code customizing color theme documentation: https://code.visualstudio.com/docs/getstarted/themes#_customizing-a-color-theme
0 comments
28 views