embark-theme / vim

An ambitious theme for vim
https://embark-theme.github.io/
MIT License
648 stars 26 forks source link

JSX tags are italicized #37

Closed ajitid closed 3 years ago

ajitid commented 3 years ago

JSX tags are italicized when embark_terminal_italics is turned on. Below is a screenshot of a TypeScriptReact (.tsx) file.

image

Installed plugins that might have affected this behaviour:

Expected behaviour: Tags should be added as an exclusion to not be italicized.

skbolton commented 3 years ago

Looks like vim-polyglot binds the jsxClosePunct they define to Comment highlight which gives the italic. I should be able to fix this pretty quickly.

skbolton commented 3 years ago

@zlksnk just wanted to ping you to let you know I haven't forgotten about this. Just had a crazy few weeks shipping a big feature at work. I would appreciate any help you could offer to help fix this, but I should also be able to get to this in the next few weeks.

skbolton commented 3 years ago

@zlksnk I have pushed a branch that is a scratchpad for adjusting and improving javascript/react code. Can you run this branch for a few days and let me know what you think? Branch is js-async-await

skbolton commented 3 years ago

I also don't do a lot of javascript coding these days so I might not have all the same plugins as you. For me the changes I made led to this look.

react

I have felt like the highlighting in javascript is way too heavy on the reds. I am trying to put more of the greens and blues that I love about this palette. Again let me know what you think.

ajitid commented 3 years ago

Just had a crazy few weeks shipping a big feature at work

I can totally understand that

appreciate any help you could offer to help fix this

I’m new to vim that being said I’m able to understand and tweak theme properties. There is a command or a shortcut that tells the token name on which cursor is on, I can’t recall or find it. Do you know the command?

I am trying to put more of the greens and blues

I feel introducing more colors will only make the theme look busy. I’ll rather suggest to give semantic meanings to colors (color A for function names, color B for keywords) so issue like #38 doesn’t arise.

For JSX tags I actually liked the color it had, only that it is italicised which is unusual to me.

skbolton commented 3 years ago

This function is really helpful. It gives you the name of the highlight group for the thing under your cursor

function! SynGroup()                                                            
    let l:s = synID(line('.'), col('.'), 1)                                       
    echo synIDattr(l:s, 'name') . ' -> ' . synIDattr(synIDtrans(l:s), 'name')
  endfun

Using these groups you should be able to add rules to colors/embark.vim

skbolton commented 3 years ago

for JSX tags I actually liked the color it had, only that it is italicised which is unusual to me.

One of my big goals of this theme was to have the perfect levels of contrast so that the important stuff was front and center and less important stuff was still readable without demanding attention. It took a few attempts to get the contrast right for comments which was one of the things that I wanted to have readable without being overbearing.

I am not totally sure that everyone would agree on having the JSX tags be less visible. I don't have a huge opinion on this since I don't really do javascript anymore. But I might go with the majority opinion on this one to make a decision.

For now I updated the branch mentioned previously and went back to the old comment highlight without the italics so you can check it out. If I end up going the other way of highlighting the jsx tags I can always give you the override so that you can have it the way that you prefer.

skbolton commented 3 years ago

@zlksnk I already changed my mind on what I previously said. I always thought that html tags where a pain to look at and the more I look at the JSX the more I like the tags fading out. Really makes it look more like function calls which is good. If others complain later I can always reconsider. Closing this.