Velo: About the Colors in the Code Editor

Velo applies syntax highlighting to the code that you write in the code editor. That means certain parts of your code appear in different colors and font weights depending on their purpose. Syntax highlighting makes it easier for you read and write your code.

In this article, we describe the highlighting of some of the most common syntactic elements. We use the following form and page code that calculates the area of a circle based on a given radius.

Keywords

Keywords are words that have a special meaning in a programming language. For example, in JavaScript, let, function, and return are all keywords.

Function Names in Function Declarations

Function declarations include a function name. The function name is used when calling the function in other parts of your code. For example, the calculateArea function defined on line 11 in the example below is called on line 5.

Parameter Names in Function Declarations

Function declarations may include one or more function parameters. The function parameters serve as the names of the arguments passed to the function. For example, the calculateArea function defined on line 12 in the example below contains one parameter named radius. That parameter name is used on line 13 when calculating the area. When the function is called on line 5, the value of the radiusInput is the argument passed to the radius parameter of the calculateArea function.

String Literals

String literals come in three different varieties in JavaScript:

  • Double quoted strings

    Copy
    1
    "literal value"
  • Single quoted strings

    Copy
    1
    'literal value'
  • Template strings

    Copy
    1
    `literal value ${nonliteral}`

In Velo, you will often use string literals to select elements using the $w() function as shown on line 4 in the example below. You might also use literal values to set the value of an element's property as shown on line 6, set the value of a variable, or pass them as arguments to functions.

Number Literals

Number literals are used to set the value of an element's property, set the value of a variable as shown on line 1 in the example below, or pass them as arguments to functions as shown on line 13.

Comments

Comments are parts of your code that are not executed when the code is run. Usually, you add comments to explain what a particular part of your code is doing.

Was this helpful?
Yes
No