search

Himujjal / tree-sitter-svelte

Tree sitter grammar for Svelte
MIT License
77 stars 15 forks source link

{#if}{:else}{/if} block is missing highlight colors #26

Closed charbelnicolas closed 2 years ago

charbelnicolas commented 2 years ago

Hello Himu, I have a small suggestion, I hope it's not too difficult to implement. It would be nice if the {#if} block could get some highlighting like normal ifs similar to what we have in VS Code:

20220628_105839

instead of what we have now:

20220628_105826

It definitely adds readability to the code when having the if with a highlight.

I hope you consider it, thank you.

Himujjal commented 2 years ago

Hmm. Interesting observation. I will look into this further. I think its doable while easily.

Himujjal commented 2 years ago
Screenshot 2022-06-30 at 8 43 26 AM

I think this has to do with your Neovim color scheme. Mine works perfectly well as you requested.

charbelnicolas commented 2 years ago

Hi Himu, yes, it works if you set TSKeyword to be the same color as TSConditional but then you also end up changing colors for something else.

I thought it would be cleaner to let tree-sitter know that {#if} is a conditional statement but I don't know if that is exactly possible.

Thank you either way, it was worth the shot.

Himujjal commented 2 years ago

Its fine bringing this issue up. The queries are the reason why this is happening.

: is a character in the tree-sitter highlighting language. In your color scheme, the color for keyword (if) and character is the same. Its the reason why the two pictures differ. Don't think its worth the extra effort.

@elianiva Can you chip in on this?

elianiva commented 2 years ago

I think you can query for the #, : or / characters inside the if statement if the node is separated. i.e # and if are two different node, so then you can target them individually by creating a custom query. You'd need to use #match?, kinda similar to this query:

https://github.com/Himujjal/tree-sitter-svelte/blob/cfa3f0ac82cd680b4efaa090a0f78035ad43a7c6/queries/highlights.scm#L5-L6

I'm sorry but I think that's the only advice I can give you. I haven't used neovim as much as I did for a few months now, I don't even have TS playground installed to try it out myself.

Himujjal commented 2 years ago

Thanks @elianiva .

@charbelnicolas This separation of nodes is already there. Its just a matter of which node is represented with which theme in your config.

charbelnicolas commented 2 years ago

Thanks @elianiva .

@charbelnicolas This separation of nodes is already there. Its just a matter of which node is represented with which theme in your config.

Alright, thank you.