What do the different colours stand for in my code?


#1

Hello!
I’m new to atom and when I write my code it automatically colours some part of my code in say x colour and other part of code in say y colour. So I wanted to know what do all these colours stand for?
I figured out about one - Tag use “red” colour. Could you please tell me what al these colours stand for ?
Thanks


#2

It’s a feature called “syntax highlighting”. When you start a new code file and save it with an extension, such as html, py, js, css, etc, Atom will guess what language the file is in and apply syntax highlighting so that different features of the code stand out. The HTML syntax highlighting colors tags as red, URLs as purple, and text as gray, attributes in orange and green, so that it’s easy to tell things apart:


#3

Compare to what it looks like without syntax highlighting:


#4

You can find out what the specific colors mean by looking at the classes used in the syntax theme or by going into the dev tools and inspecting a particular element. Classes are determined by the active grammar, and most of them are named similarly so that most themes work most of the time. Some languages have specific needs, so if you look through the themes you will notice some that have support for those niche languages.


#5

Thank you so much!
Regards