Is there a way to give different colours to different HTML tags?


#1

Hi,

Just a quick question, I’m new to Atom and I was wondering if there was a way to give different HTML tags different colours.

For example, the “script” tag to be red, the “a” tag to be blue, the “div” tag to be green… etc.Currently they all seem to be the same colour in all the themes that I’ve looked into. It seems like they are grouped together and you cant change one’s colour without the rest following suit.

Also, can the same be done with attributes too? I mean “href” “style” “class” etc.

Sorry if this is a stupid question but I’d really appreciate the help.

Thanks.


#2

This is determined by the language-html package. It determines what patterns the editor looks for and what classes are given to matched text. You can look at its grammar to see how the tags are defined.

  {
    'begin': '(</?)((?i:address|blockquote|dd|div|section|article|aside|header|footer|nav|menu|dl|dt|fieldset|form|frame|frameset|h1|h2|h3|h4|h5|h6|iframe|noframes|object|ol|p|ul|applet|center|dir|hr|pre)\\b)'
    'beginCaptures':
      '1':
        'name': 'punctuation.definition.tag.begin.html'
      '2':
        'name': 'entity.name.tag.block.any.html'
    'end': '(>)'
    'endCaptures':
      '1':
        'name': 'punctuation.definition.tag.end.html'
    'name': 'meta.tag.block.any.html'
    'patterns': [
      {
        'include': '#tag-stuff'
      }
    ]
  }

Any of the listed tags are given the classes entity.name.tag.block.any.html. There are two other such rules in the grammar file, one for core structural tags and one for inline elements. A theme writer can target these specific groups with the .structure, .block, and .inline classes. If you want any more specific definitions, you have two options.

  1. You can modify the grammar for language-html, disable the package that came with Atom, and use the nonstandard package. This has three issues: it’s slightly harder to share your work with others who might want it, any big updates to language-html would require you to update your package, and (the only really impactful one) themes would have no idea what to do with the extra tags you added. Any theme you wanted to use would have to be modified to work with your modified grammar.

  2. This solution is more difficult but also more solid: you can have a third package use JavaScript to add more specific classes to those tags and contain the style information to color them. I haven’t been able to find a package that does this, but it should be possible to find the appropriate <span> elements by their innerHTML (in this case, the name of the tag in your code), so that <span class="entity name tag html">b</span> becomes something like <span class="entity name tag html bold">b</span>, and then you can style .bold however you like.