Color code specific HTML tags


#1

Hi guys, just starting to use Atom after using dreamweaver for years, one thing thats really bugging me at the moment is dreamweaver highlights A and IMG tags in a different color to the other HTML tags. I find this really useful when scanning through the code and cant find a way to replicate this with Atom.

does anyone know of a solution? i have tried using the developer tools but Atom does not apply classes to tags if you see what i mean (ie .img or .a )

Thanks in advance for any help


#2

You would need to fork language-html and add patterns to match for specific tags. Depending on how much control you want, you might need to make your own syntax theme.

I can provide more information if you want to pursue this.


#3

Thanks for your reply,

if you have the information close to hand it would be interesting to see but i fear it might be a little beyond me - i am keen to switch permanently to Atom but this feature in DW is so useful when scanning through code that i dont know if i could live without it!

thanks again & if you could point me in the right direction i would be grateful


#4

This is the exact reason I have not made the switch myself. I have customized a couple themes to be close to what I have in DW, but the inability to change coloring at the specific tag level is forcing me to hold on to heavy DW.


#5

This is now possible. Every tag has a specific scope associated to it, for example entity.name.tag.structure.head.html vs entity.name.tag.block.div.html or entity.name.tag.inline.i.html. Then just customize how those scopes should look in your ~/.atom/styles.less file.


Can I set the color for specific html tags
#6

@Wliu Thanks for responding. I am glad to hear that this is an option, but I am not sure I am following in regards to the steps required. Could you elaborate a bit? #atomnoob


#7

Open up the Less file I referenced in the last line.

.syntax--html.syntax--entity.syntax--name.syntax--tag {
    &.syntax--structure {
        &.syntax--head {
             color: YOUR_COLOR_HERE;
         }
    }
    &.syntax--block {
        &.syntax--div {
            color: YOUR_COLOR_HERE;
        }
    }
    /* etc */

You can get the scopes by using the command editor:log-cursor-scope when your cursor is on a tag.


#8

Thanks for elaborating. Using the form tag as an example, I was able to change the color. However only word ‘form’ changes. I am looking to change all of the attributes as well. Do you know the child element for that?