Semantic highlighting

[JosephTLyons]

I'm dyslexic, so I actually have a hard time reading code without my mind getting jumbled up. One feature that I've found that has helped me tremendously is JetBrains' Semantic Highlighting. I want to be reiterate the JetBrains part of that because other editors also have features called "Semantic Highlighting," but not all of those seem to be the same feature.

What JetBrains' Semantic Highlighting does is highlight all variables in a function with different colors. Here is a minimal example.

Sublime Text 4:

PyCharm:

You'll notice that suit_value and suit_string are highlighted differently. You can easily trace them out individually over the function because of this. This example is rather minimal, but in larger, more complex functions, the feature becomes more obvious and invaluable. If you don't have issues with dyslexia, this may be a bit jarring to you, but this is has become essential to my development; I almost see it as an accessibility feature and I'd imagine others do as well. As for the implementation, I'm not quite sure how they do it. I know the color changes depending on the variable name length, so maybe they hash the name out into something that is used to generate a color.

I caught wind that VS Code was implementing an API for Semantic Highlighting some time ago, but their version is about highlighting language keywords differently and doesn't seem to have anything to do with local variables. I don't believe Atom ever had this built in, but I found a package or two back in the day that tried to add the functionality, but I recall there being some issue with it.

[SomeoneToIgnore]

One amazing capability rust-analyzer provides is a "secret" unresolved reference diagnostics. When VSCode is additionally configured with

"editor.semanticTokenColorCustomizations": {
        "enabled": true,
        "rules": {
            // All-themes colors
            "unresolvedReference": {
                "foreground": "#c93f3f",
                "fontStyle": "bold"
            },
        },
    },

it's able to provide cargo-less, realtime, diagnostics:

[TerminalFi]

I'm dyslexic, so I actually have a hard time reading code without my mind getting jumbled up. One feature that I've found that has helped me tremendously is JetBrains' Semantic Highlighting. I want to be reiterate the JetBrains part of that because other editors also have features called "Semantic Highlighting," but not all of those seem to be the same feature.

What JetBrains' Semantic Highlighting does is highlight all variables in a function with different colors. Here is a minimal example.

Sublime Text 4:

PyCharm:

You'll notice that suit_value and suit_string are highlighted differently. You can easily trace them out individually over the function because of this. This example is rather minimal, but in larger, more complex functions, the feature becomes more obvious and invaluable. If you don't have issues with dyslexia, this may be a bit jarring to you, but this is has become essential to my development; I almost see it as an accessibility feature and I'd imagine others do as well. As for the implementation, I'm not quite sure how they do it. I know the color changes depending on the variable name length, so maybe they hash the name out into something that is used to generate a color.

I caught wind that VS Code was implementing an API for Semantic Highlighting some time ago, but their version is about highlighting language keywords differently and doesn't seem to have anything to do with local variables. I don't believe Atom ever had this built in, but I found a package or two back in the day that tried to add the functionality, but I recall there being some issue with it.

Btw. Sublime does support this, given the right color scheme I believe. But unrelated.

[shrimpwtf]

bump, literally me

[rchl]

You are asking for semantic highlighting but actually requesting hashed highlighting (or whatever it's called). Two variables with different names would not be highlighted differently by semantic highlighting since those are semantically the same - local variables.

[graup]

I also really enjoy VS Code's semanticTokenColorCustomizations. You can also use it to format function parameters and const variables differently than other variables:

"editor.semanticTokenColorCustomizations": {
    "rules": {
      "parameter": { "italic": true, "foreground": "#E9B381" },
      "variable.readonly": "#B1B4F3"
    }
  },

Would be great if this was supported by Zed.

[paradoxxxzero]

vscode also have a plugin for "hashed highlighting" : vscode-color-identifiers-mode

This extension and the original semanticolor are sadly a bit hackish.

I for one would really like to have a simple extension API hook for post-highlighting (something like (token, context, color, ...) -> finalColor that could be hooked to give a hashed color preferably in the tone of the current theme).

[WillsterJohnson]

Would very much like to see this in Zed.

We use VSCode at work and I've made a few changes to Catppuccin Mocha via semantic tokens (really just to recolor certain identifiers) and had hoped to port them into my Zed setup at home tonight. I can see a few things I can change via theme overrides but it doesn't look like I can exactly replicate everything I wanted to. Having tried to replicate it as close as I can, the options are either one good match & everything else unchanged, or a couple okay matches & lots of undesired highlighting.

I can make do short-term, Zed is still a young product after all and has a hell of a lot going for it already, but long-term this is a must. I really like knowing whether a variable is const or let or a parameter without hovering or scrolling/F12 to the declaration.