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

Highlighting of JSX tags #21

Closed
jfrolich opened this issue Nov 23, 2020 · 6 comments · Fixed by #367
Closed

Highlighting of JSX tags #21

jfrolich opened this issue Nov 23, 2020 · 6 comments · Fixed by #367
Labels
enhancement New feature or request

Comments

@jfrolich
Copy link
Contributor

Hi,

I'm testing out the new 1.0 release of the plugin and I am very impressed! It might be already on the radar, but I didn't see an issue for it; the JSX tags are currently not highlighted making the source code harder to read IMO. See attached code sample for the difference:

image

@tkovs
Copy link

tkovs commented Nov 26, 2020

Here it is working for my own components

image

@jfrolich
Copy link
Contributor Author

Interesting! That is not working for me. What version of the extension are you using?

@tkovs
Copy link

tkovs commented Nov 29, 2020

Interesting! That is not working for me. What version of the extension are you using?

image

@jfrolich
Copy link
Contributor Author

I found out that it is just that my theme didn't color the entity.name.namespace. Many themes do not, because I had this hypothesis that my theme wasn't displaying them and swapped a few themes and they also didn't. Dark+ does however. You can also add the value in the settings:

  "editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "name": "JSX",
        "scope": ["entity.name.namespace"],
        "settings": {
          "foreground": "#80CBC4"
        }
      },
      // you might also want to set this for polymorphic variants
      {
        "name": "other",
        "scope": ["punctuation.definition.keyword"],
        "settings": {
          "foreground": "#f87086"
        }
      }
    ]
  }

@Faliszek
Copy link

Faliszek commented Dec 8, 2020

@jfrolich thanks for the solution, i also wanted to highlight in my theme jsx element and their attributes but I found out, that with actual grammar this it is not possible yet(?).
What i mean is, in .re file with ocaml-platform extension when i check it with Cmd + Shift + P and pick DM: Inspect editor tokens and scopes i get something like this when checking

    Zrzut ekranu 2020-12-8 o 01 29 13 Zrzut ekranu 2020-12-8 o 01 29 18

    but right now they are not assigned to any scope

    Zrzut ekranu 2020-12-8 o 01 29 49

    Is it bug... or it is something that won't be implemented?

    PS. I was thinking about it creating new issue, but this is also related to jsx so i thought it might good place to point that out because i think lot's of themes are decorating jsx in this manner

@Faliszek
Copy link

Faliszek commented Dec 10, 2020

Hm, i can see that there is already pull request open with adding this feature

#8

@cristianoc cristianoc added the enhancement New feature or request label Jun 7, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants