4D Blog

Home Product Setting up code syntax highlighting using the Visual Studio Code extension

Setting up code syntax highlighting using the Visual Studio Code extension

September 8, 2022

Product

We recently talked about our new Visual Studio Code extension allowing VS Code to communicate with 4D for code management. The syntax highlighting was the first Language Server Protocol feature in 4D v19 R6. Let’s see how to customize your source code rendering.

You may want to customize the syntax highlighting to your own style sheet or to the 4D default style sheet as shown below:

Let’s take a look at further technical information.

semantic tokens

In all programming languages, the code is made up of semantic tokens. A semantic token is a part of the code with a unique sense, such as classes, methods, variables, etc. Like other languages, the 4D code is split into semantic tokens and modifiers.

VS Code allows you to check semantic tokens in its code editor. To display them, open the VS Code Command Palette, search “Inspect Editor Tokens and Scopes,” and select it.

blank

A palette shows the properties of the code part behind the cursor, including the Semantic Token and its Modifier, if any. Just select another part of the code to directly see the related properties.

blank

Here is the mapping table between 4D language and LSP semantic tokens:

LSP semantic token 4D language
method methods
method.defaultLibrary commands
method.plugin plugin methods
property object attributes
function object member functions
parameter method parameters, object member function parameters
variable.interprocess interprocess variables
variable.process process variables
variable.local local variables
keyword keywords
table tables
field fields
comment comments
type types
constant constants
string strings
error errors

How to set up fonts?

You may say, “Ok, VS Code recognizes 4D code automatically, but what more?”. This is the last step: setting up the font of each semantic token.
To customize it, you have to edit the settings file used by your VS Code. To do that, open the VS Code Command Palette, search for “Settings.json” and edit it.
For information, the VS Code Settings.json file is placed here:

/Users/{UserName}/Library/Application Support/Code/User/settings.json on macOS
C:\Users\{UserName}\AppData\Roaming\Code\User\settings.json on Windows

blank

blank

Here are the JSON settings to add to display the 4D code with the “light 4D” and “dark 4D” stylesheets (search in the settings.json for the line “4D-Analyzer.server.path,” and insert the whole following block in the line above or below):

"editor.semanticHighlighting.enabled": true,
    "editor.semanticTokenColorCustomizations": {
        "[Default Light+]":{
            "enabled": true,
            "rules": {
                "*:4d": {"foreground": "#000000", "bold": false, "italic": false, "underline": false, "strikethrough": false},
                "method:4d": {"foreground": "#000088", "bold": true, "italic": true},
                "method.defaultLibrary:4d": {"foreground": "#068c00", "italic": false},
                "method.plugin:4d": {"foreground": "#000000"},
                "property:4d": {"foreground": "#a0806b"},
                "function:4d": {"foreground": "#5f8e5e", "italic": true},
                "parameter:4d": {"foreground": "#000b76", "bold": true},
                "variable.interprocess:4d": {"foreground": "#ff0088"},
                "variable.process:4d": {"foreground": "#0000ff"},
                "variable.local:4d": {"foreground": "#0031ff"},
                "keyword:4d": {"foreground": "#034d00", "bold": true},
                "table:4d": {"foreground": "#532300"},
                "field:4d": {"foreground": "#323232"},
                "comment:4d": {"foreground": "#535353"},
                "type:4d": {"foreground": "#068c00", "bold": true},
                "constant:4d": {"foreground": "#4d004d", "underline": true},
                "string:4d": {"foreground": "#000000"},
                "error:4d": {"foreground": "#ff0000", "bold": true, "italic": true}
            }
        },
        "[Default Dark+]":{
            "enabled": true,
            "rules": {
                "*:4d": {"foreground": "#FFFFFF", "bold": false, "italic": false, "underline": false, "strikethrough": false},
                "method:4d": {"foreground": "#1B79F3", "bold": true, "italic": true},
                "method.defaultLibrary:4d": {"foreground": "#59BB00", "italic": false},
                "method.plugin:4d": {"foreground": "#BFBFBF"},
                "property:4d": {"foreground": "#A0806B"},
                "function:4d": {"foreground": "#4EC36E", "italic": true},
                "parameter:4d": {"foreground": "#0C70FF", "bold": true},
                "variable.interprocess:4d": {"foreground": "#FF0088"},
                "variable.process:4d": {"foreground": "#53B0EB"},
                "variable.local:4d": {"foreground": "#18B3F1"},
                "keyword:4d": {"foreground": "#575757", "bold": true},
                "table:4d": {"foreground": "#CF5600"},
                "field:4d": {"foreground": "#9C6765"},
                "comment:4d": {"foreground": "#8F8F8F"},
                "type:4d": {"foreground": "#59BB00", "bold": true},
                "constant:4d": {"foreground": "#FA647F", "underline": true},
                "string:4d": {"foreground": "#FFFFFF"},
                "error:4d": {"foreground": "#ff0000", "bold": true, "italic": true}
            }
        }
    },

Note that the “:4d” after each semantic token type is not mandatory, but it allows you to set this syntax highlighting only for the 4D language. By doing this, syntax highlighting for all other languages will be left untouched.
When saving the settings, you can see the effect directly in the code editor!

This customization is beneficial when using VS Code with a 4D project containing a web part. All languages keep their own syntax highlighting: HTML, CSS, Javascript, and now… 4D!

Discuss

Tags 4D-Analyzer, Code editor, v19 R6, v20, vscode

Latest related posts

  • May 20, 2025

    Automatic Refresh of OEM Build Licenses

  • May 16, 2025

    New class to handle incoming TCP connections

  • April 29, 2025

    Discover your AI-powered writing assistant in 4D Write Pro

Avatar
Damien Fuzeau
• Product Owner •Damien Fuzeau has joined the 4D Product team in February 2019. As a Product Owner, he is in charge of writing user stories, then translating them to functional specifications. His job also entails making sure that the feature implementations delivered are meeting the customer needs.Damien is graduated from the University of Nantes in software engineering. He spent more than 23 years in its former company, first as developer (discovering 4D in 1997), and later as engineering manager and software architect. This company is a 4D OEM partner and deployed 4D based business softwares for thousands users, on hundreds servers. So, Damien is used to 4D development and deployment in a multi-language context.
  • Deutsch
  • Français
  • English
  • Português
  • Čeština
  • Español
  • Italiano
  • 日本語

Categories

Browse categories

  • 4D View Pro
  • 4D Write Pro
  • 4D for Mobile
  • Email
  • Development Mode
  • 4D Language
  • ORDA
  • User Interface / GUI
  • Qodly Studio
  • Server
  • Maintenance
  • Deployment
  • 4D Tutorials
  • Generic
  • 4D Summit sessions and other online videos

Tags

4D-Analyzer 4D for Android 4D for iOS 4D NetKit 4D Qodly Pro 4D View Pro 4D Write Pro 20 R8 20 R9 Administration Authentication Build application CI/CD Class Client/Server Code editor Collections Compatibility settings Formula Google Listbox Logs Mail Network Objects ORDA PDF Pictures Preemptive Programming Qodly Studio REST Scalability Security Session Source control Speed Spreadsheet Tutorial UI User Experience v20 vscode Web Word processor

Tags

4D-Analyzer 4D for Android 4D for iOS 4D NetKit 4D Qodly Pro 4D View Pro 4D Write Pro 20 R8 20 R9 Administration Authentication Build application CI/CD Class Client/Server Code editor Collections Compatibility settings Formula Google Listbox Logs Mail Network Objects ORDA PDF Pictures Preemptive Programming Qodly Studio REST Scalability Security Session Source control Speed Spreadsheet Tutorial UI User Experience v20 vscode Web Word processor
Subscribe to 4D Newsletter

© 2025 4D SAS - All rights reserved
Terms & Conditions | Legal Notices | Data Policy | Cookie Policy | Contact us | Write for us


Subscribe to 4D Newsletter

* Your privacy is very important to us. Please click here to view our Policy

Contact us

Got a question, suggestion or just want to get in touch with the 4D bloggers? Drop us a line!

* Your privacy is very important to us. Please click here to view our Policy