What do each of the colors mean inside of code editors?

I’ve always meant to ask this question.

Why don’t you group all the items you see in the same colour, and try to figure out what they all have in common. The colours in a text editor give us a way of determining very quickly if anything is incorrect or out of place.

You actually can customize those colours yourself, if you don’t like the colour choices. You will find this feature probably in the ‘preferences’ menu of the text editor.

1 Like

I just found this:

Green = a string
Grey = a comment
Orange = a number or a parameter (or a predefined property name(for instance .length))
Purple = special keyword (like var, if, else, etc)
Light-blue = operator (+,-, *,/,=, <, ==, &&, etc)
Dark-blue = a predefined function name or the function name in a function declaration
Red = predefined classes and objects (including the this keyword)
White = everything else

Did you find that somewhere, or did you figure it out yourself? It is good practice to try to figure out the answer on your own, before hunting around for the answer that someone else has given.

I found it somewhere.

Different editors have different colours, some let you customise them.
It is basically to make it easier to pick out and identify different elements of the code for what they are.
In this case orange is a css selector, black are css properties, and the values of those properties are all different colours, depending on the type of value, eg, px dimensions are red, hex colours are blue, keyword colours are purple, URLs green etc…

1 Like

What’s light blue?

In your example it looks like a font name.
The colour assignment may vary depending on the language. You example is CSS, but the definitions in post #3 are not necessarily relevant to that language.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.