patstockwell/vim-monokai-tasty

Better colors for HTML attributes

dubst3pp4 opened this issue · 3 comments

dubst3pp4 commented

At first many thanks for your great color scheme 👍

Compared to other colorschemes I recognized, that HTML attributes are hard to read:

Here is a screenshot of vim-monokai-tasty:
Bildschirmfoto von 2021-09-20 10-28-59

and a screenshot compared to night-owl colorscheme:
Bildschirmfoto von 2021-09-20 10-26-36

Not only the attributes are in another color, but also the quotes, which makes the code much more readable.

Although the screenshot is from a Vue template (so not pure HTML), the same issue occurs within pure HTML files. Is there a way to make attributes more readable?

patstockwell commented

Hi @dubst3pp4, thanks for opening a git issue. I'll take a look and get back to you!

patstockwell commented

Hi @dubst3pp4, Thanks again for taking the time to request changes. I've added a few colour highlights to improve the html. Let me know what you think. :PlugUpdate should get you the latest (assuming you're using plug). See this commit -> 1e96ca2

Specifically about the quotes, unfortunately, the html syntax file doesn't differentiate between the quotes and the content in between the quotes. They are both considered htmlString. In the screenshot you shared you will notice that line 476 in both images has the quotes and the string values as the same colour. The remaining attributes are actually an accident due to the fact that the html syntax file can't parse Vue syntax.

I hope these changes improve the readability. Generally, I try to stick to the way Sublime text does monokai as that was what inspired this project initially. See screenshots for comparisons.

vim-monokai-tasty before

Screen Shot 2021-09-22 at 9 03 04 pm

vim-monokai-tasty after

Screen Shot 2021-09-22 at 9 03 16 pm

Sublime text

Screen Shot 2021-09-22 at 9 06 04 pm

night-owl

*Notice here the strings and the quotes are the same colour
Screen Shot 2021-09-22 at 9 05 34 pm

dubst3pp4 commented

Thanks @patstockwell, sorry for the late response. For standard HTML attributes it looks fine, but for "non-standard" attributes used with Vue (eg. something like :value="foo") it still looks the same. Maybe it has something todo with the vim-vue-plugin I'm using. But I don't now how it differs to the standard html syntax file and how syntax is defined there (sorry I'm not that deep into Vim plugins).