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"
}
}
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:
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