Add more support for HTML syntax highlighting in Atom.

[timothyis]

I plan to fix this myself. @imcatnoone Could you provide a screenshot of how HTML syntax highlighting looks in Sublime Text?

Also, in addition to this issue, I think it might be a good idea to add tags to this repo that we can add to issues to indicate what editor they relate to. I.e this issue would be tagged with Atom. 😀

[imcatnoone]

@CodeTheory I agree regarding the tags. Going to do so now.

Also, here's a screenshot of HTML syntax. Have anything in mind in terms of what you're interested in changing? Currently looking at it and trying to figure out the best color and way to implement it.

[timothyis]

@imcatnoone I don't code in HTML much because I use Jade (a preprocessor), but I did code in HTML the other day and it slowed me down a bit not seeing the difference between tag names, < > syntax, attribute names and general content between tags. I feel like if there was a bit more colour there and it was easy to distinguish between different parts of the syntax, it would be easier to write. Especially for those of us who already have bad eye sight. 😜

[imcatnoone]

@CodeTheory would you be interested in fixing the same HTML issues in sublime as well? If not, will tackle that!

[ChristophLabacher]

@imcatnoone I just hacked this together (for atom):

I think it works reasonably well, the tags are somewhat taken back, but still stand out. The attributes and their values are very visible (the yellow seems a bit too much to me when using long attributes, such as URLs, but it is taken from the general theme were all strings are yellow).

Do you think this is too colorful? Would love to hear your feedback.

.html.punctuation {
  color: @blue-gray-dark;
}

.html.entity.name.tag {
  color: @blue;
}

.html.entity.other.attribute-name  {
  color: @green;
}

[bagadim]

It will be nice to have html colouring also for Visual Studio Code.

[imcatnoone]

@ChristophLabacher sorry for the delay but love this! Have you checked how it looks when dimmed / under f.lux or other sorts? Or are those colors pulled from the current set of colors?

[ChristophLabacher]

@imcatnoone Glad you like it! Those are all from the existing color set. I just changed the assignment of the colors to the entities to be better suited for HTML – the six lines of code I posted are actually everything I changed.