Color meanings in the code playground

Question

What is the meaning of the different colors of the code in the code playground?

Answer 1

Decimis lol

Answer 2

Heheheh ok.😂😂😂😂

Answer 3

Hey there,

Nexus is correct, but I would like to actually explain it more deeply.

When you input the following:

start 0, 0;
move up 5;

What do you think the interpreter sees? Well it sees the following:

s,t,a,r,t ,0, ,0,;,
m,o,v,e, ,u,p, ,5,;

That looks like a mess 😱 But it is actually an array of single characters.

The interpreter will go through a phase called lexical analysis. The key part of this phase is that it reads those characters and tries to simplify them.

[{ token: 'start', type: 'START' },
{ token: '0', type: 'NUMBER' },

// Etc...
]

This is quite simple 😉😉

=====

After going through the Lexer, the tokenized output moves to the parser.

Here, there are two main phases:

1. Checking the syntax (Remember this one)

2. Make the Abstract Syntax Tree.

In the first phase, we make sure that there is a token called START. We make sure the 'up' comes right after 'move'. We make sure that there are also semicolons.

Continue to part 2

[ 1 of 2 ]

Answer 4

In the second phase, we transform all of our tokens into a tree like structure:

A B C;

A
/ \
B | \
C ;

Once our "tree" is built we move it to the last part: execution.

Based on the tree, we visit each node and create a cache of what was found in the node.

If we reached back to the parent, we execute the node from left to right. And taa-daa our code is interpreted 😃

=======
=======

But what does the above process have to do about styling the text?

Well, the 1st phase of the parser checks for syntax errors.

If there are no errors, the editor will use the predefined colour values for each token, START, NUMBER, COMMA, etc..

[ 2 of 2 ]

Answer 5

The colors are there to better see variables functions and in generall different types of predefined words.

Most development enviroments have different colorings and most of them let you customize what should have what color.

Answer 6

thanks so far but I don't quite get what the colors are referring to exactly. I tried to guess, but my theories all turned out inconsistent.
e.g.: https://code.sololearn.com/692/#js
in the standard highlighting "this" in lines 2 and 3 is highlighted green. In line 4 it's blue. My guess was that blue means that the code is referring to a function. But why, then, is "var" in line 9 highlighted blue (as is every introduction of a variable)?
Green seems to signify a relation to an object but why, then, is "changeName" in line 4 green, and not white like the other parameter-related codes?
Where can I find the highlighting index?

Answer 7

Syntax Highlighting like Flaming Arrow said.

Try to code where everything is all the same color and you will see why it is used. When you have line after line of code, it makes it much easier to understand and read it.

The colors themselves are not always the same because that is not important. What is important is rather that everything of the same type has the same color.

Answer 8

Girl Power Type a @ and a list of people that commented on that post will show up for you to tag. It will also show on the list the people that you follow 😋

Answer 9

These are called syntax highlighting

Answer 10

Thure Küpker I don't think that the link you posted is what you meant to post. It just shows a new html code that is not an html code 😅

Answer 11

Syntax highlighting. That exists because KEYWORDS, STRINGS, PREPROCESSORS can make programmer confused. Thats reason why is highlighting here.

Highlighting is not only in code playground, you have that and in other IDE-s:

VS, DEV C++, Code::Blocks, NetBeans, Eclipse, etc...

Answer 12

Edwin Pratt Interesting 🤔. I never had it explained like that before. I only knew that it was done to help the coder themselves make better sense of it.