Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Semantic highlighting #5345

Open
JosephTLyons opened this issue Jun 23, 2022 · 7 comments
Open

Semantic highlighting #5345

JosephTLyons opened this issue Jun 23, 2022 · 7 comments
Labels
accessibility Improvement related to color contrast, screen reader support, keyboard navigation, etc design [core label] enhancement [core label] priority request A request from a stakeholder or influential user

Comments

@JosephTLyons
Copy link
Collaborator

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:
Screen Shot 2021-09-24 at 12 21 18 AM

PyCharm:
Screen Shot 2021-09-24 at 12 21 58 AM

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.

@JosephTLyons JosephTLyons added the enhancement [core label] label Jun 23, 2022
@mikayla-maki mikayla-maki added the design [core label] label Aug 5, 2022
@SomeoneToIgnore
Copy link
Contributor

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:

image

@TerminalFi
Copy link

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: Screen Shot 2021-09-24 at 12 21 18 AM

PyCharm: Screen Shot 2021-09-24 at 12 21 58 AM

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
Copy link

bump, literally me

@JosephTLyons JosephTLyons transferred this issue from zed-industries/community Jan 24, 2024
@rchl
Copy link

rchl commented Jan 25, 2024

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
Copy link

graup commented Jan 26, 2024

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.

@ConradIrwin ConradIrwin added the priority request A request from a stakeholder or influential user label Mar 13, 2024
@paradoxxxzero
Copy link

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).

@notpeter notpeter added the accessibility Improvement related to color contrast, screen reader support, keyboard navigation, etc label Jun 25, 2024
@WillsterJohnson
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
accessibility Improvement related to color contrast, screen reader support, keyboard navigation, etc design [core label] enhancement [core label] priority request A request from a stakeholder or influential user
Projects
None yet
Development

No branches or pull requests