+ 5

Color meanings in the code playground

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

25th Apr 2019, 1:29 PM
Thure Küpker
12 Antworten
+ 11
Decimis lol
25th Apr 2019, 7:38 PM
Assassin💞[#BeFierce]
Assassin💞[#BeFierce] - avatar
+ 11
Heheheh ok.😂😂😂😂
25th Apr 2019, 7:43 PM
Assassin💞[#BeFierce]
Assassin💞[#BeFierce] - avatar
+ 8
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 ]
2nd May 2019, 9:46 PM
Edwin Pratt
Edwin Pratt - avatar
+ 8
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 ]
2nd May 2019, 9:55 PM
Edwin Pratt
Edwin Pratt - avatar
+ 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.
25th Apr 2019, 3:56 PM
Dragonxiv
Dragonxiv - avatar
+ 5
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?
25th Apr 2019, 7:32 PM
Thure Küpker
+ 4
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.
25th Apr 2019, 6:48 PM
Decimis † 𝕯𝖊𝖈𝖎𝖒𝖎𝖘
Decimis † 𝕯𝖊𝖈𝖎𝖒𝖎𝖘 - avatar
+ 4
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 😋
25th Apr 2019, 7:42 PM
Decimis † 𝕯𝖊𝖈𝖎𝖒𝖎𝖘
Decimis † 𝕯𝖊𝖈𝖎𝖒𝖎𝖘 - avatar
+ 3
These are called syntax highlighting
25th Apr 2019, 5:31 PM
Shahil Ahmed
Shahil Ahmed - avatar
+ 3
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 😅
25th Apr 2019, 7:37 PM
Decimis † 𝕯𝖊𝖈𝖎𝖒𝖎𝖘
Decimis † 𝕯𝖊𝖈𝖎𝖒𝖎𝖘 - avatar
+ 3
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...
26th Apr 2019, 9:58 AM
Baltazarus
Baltazarus - avatar
+ 1
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.
2nd May 2019, 11:23 PM
Decimis † 𝕯𝖊𝖈𝖎𝖒𝖎𝖘
Decimis † 𝕯𝖊𝖈𝖎𝖒𝖎𝖘 - avatar