Setting VSCode Up for Syntax Highlighting

I've completely abandoned Visual Studio on Windows, and I'm phasing out Sublime Text use...so I'm thus committing to a VSCode-based workflow.

I wanted to get very basic syntax highlighting...where SET-WORD!s are bold, and comments are a different color.

The shortest path to having something right now seems to be to use the VSCode extension for Red. You can install it from the extensions marketplace. The extensions icon is on the left sidebar, the four little boxes with the box in the upper right hand corner popped out.

Change the File Associations for Rebol and Red

It won't by default recognize .rebol, .r, or .reb files. It thinks .r is R language.

So you have to open a file of with the suffix you want to remap.

With a file of your target type open, do Control-Shift-P and type in "Change Language Mode" (it will autocomplete). Run the command, and you will get a drop down menu. Say it's Red.

You should get the syntax highlighting.

Customize Any Colors In Your settings.json

I've made my opinion known that it's not good to be colorizing the likes of IF and RETURN specially from other WORD!s. There are not supposed to be keywords, this undermines the message.

So getting rid of the Froot Loops colors is the first order of business. There's no UI to speak of for configuring the colors in VSCode. You have to edit a JSON file.

Again with Control-Shift-P but type in "Preferences: Open Settings (JSON)" (it will autocomplete). A JSON file will open.

You can customize the environment itself (toolbars, etc.) or you can customize the syntax in the file. For the syntax in the file, that's done under editor.tokenColorCustomizations. For example:

"editor.tokenColorCustomizations": {
    "comments": {  // gray is more subtle than the garish "green" comment
        "foreground": "#919191",
        "fontStyle": ""
    },
    "strings": {  // darken the shade of red used for strings
        "foreground": "#7c2424",
        "fontStyle": ""
    },
    "textMateRules": [
        {  // make SET-WORD!s bold, dark blue seems a bit subtler than black
            "scope": ["variable.name.red"],
            "settings": {
                "foreground": "#242650",
                "fontStyle": "bold"
            }
        },
        {  // Ren-C has no keywords, don't highlight "Red/System words"
            "scope": ["storage.type.function.reds.red"],
            "settings": {
                "foreground": "#000000",
                "fontStyle": ""
            }
        },
        {  // Ren-C has no keywords, don't highlight "Red words"
            "scope": ["storage.type.function.red"],
            "settings": {
                "foreground": "#000000",
                "fontStyle": ""
            }
        },
        {  // So long as ending in ! still makes words, don't colorize
            "scope": ["storage.type.cs.red"],  // word ending in !
            "settings": {
                "foreground": "#000000",
                "fontStyle": ""
            }
        },
		{  // Can't figure out how to recolor tags, it ignores this
            "scope": ["meta.tag.red"],
            "settings": {
                "foreground": "#22492e",
                "fontStyle": ""
            }
        },
        {  // Tag color doesn't seem to come from HTML
            "scope": ["entity.name.tag.html"],
            "settings": {
                "foreground": "#4a9ec5"
            }
        }
    ]

Autocompletion will hint you about things like comments and strings that are basic across all grammars. But if you're wondering how to know the list of things like variable.name.red to colorize just for Redbols, you have to look at this file from the extension:

syntaxes/Red.tmLanguage.json

Poke around there for anything that says name:, e.g. "name": "variable.name.red" to find the possibilities.

I can't figure out how to override the color of tags, however. I can make them bold, but it seems to be getting the color from somewhere else.

Hacking On The Rules

If one wants to hack on the syntax highlighting file, it's stored locally under the .vscode directory of your home directory, e.g.

\.vscode\extensions\red-auto.red-0.4.3\syntaxes\Red.tmLanguage.json

Edits to that file seem to be picked up on restart. You can back up a local copy, or just restore it from the web if you mess it up.

I'm not that big of a fan of syntax highlighting, so it probably won't be me who makes a fork of this extension to have support for things like COMMA! or SYM-XXX! But, who knows, maybe I'll get inspired sometime.

2 Likes