Syntax Highlighting
Syntax highlighting enables you to color specific tokens in your code. Imagine what a life it would be if all of your code was only one color! Thanks to Custom Themes, you can now customize syntax highlighting to your liking!
Usually this color is applied when you use or define a variable in which no declaration keyword is used.Variable Names
Javascript
const message = "Hello World";
console.log(message); // "message" on this line gets highlighted
Python
message = "hello python" # no declaration keyword like "const" is used, so 'message' is colored here
print(message) # and during usage
This color gets put into use when defining a variable with a definition keyword such asVariable Definitions
const
,var
,int
, etc.
Javascript
const variableName = "Look Ma, I'm a variable!"; // 'variableName' is highlighted
Java
public class Main {
public static void main(String[] args) {
int numericValue = 100; // 'numericValue' is highlighted
}
}
This color gets applied when you call a function.Function References
Javascript
function run() {
console.log("I'm Running!");
}
run(); // 'run' is highlighted
Python
def dog_bark():
print("Woof!")
dog_bark() # 'dog_bark' is highlighted
When defining a function, this is the color that your function definition will be.Function Definitions
Javascript
function run() {
// 'run' is highlighted
console.log("I'm Running!");
}
Python
def dog_bark(): # 'dog_bark' is highlighted
print("Woof!")
This one color highlights the important keywords in your code such as variable definitions, class definitions, imports/exports, and more!Keywords
Javascript
export default async function MyAsyncFunction() {
// 'export', 'default', 'async', and 'function' get highlighted
// 'return' and 'new' get highlighted
return new Promise((resolve, reject) => resolve("hello world"));
}
Python
import string, sys # 'import' gets highlighted
for i in sys.argv[1:]: # 'for' and 'in' get highlighted
try: # 'try' gets highlighted
fahrenheit=float(string.atoi(i))
except string.atoi_error: # 'expect' gets highlighted
print(repr(i), "not a numeric value") # 'print' gets highlighted
This color gets applied when accessing a property from a variable.Property Names
Javascript
const person = {
name: "John",
job: "Programmer",
};
const { job } = person; // 'job' is highlighted
console.log(person.name, job); // 'name' is highlighted
This color gets applied when defining a method or property.Property Definitions
Javascript
class Person {
constructor(name, job) {
// 'constructor' gets highlighted
this.name = name;
this.job = job;
this.stats = {
weight: 200, // 'weight' gets highlighted
};
}
}
This color gets applied when calling a method.Function Properties
Javascript
console.log("Hello World"); // 'log' gets highlighted
Python
fahrenheit = float(string.atoi(i)) # 'atoi' gets highlighted
Tag Names
This color applies to tags in HTML and JSX.
HTML
<div>This is a test</div>
<!--'div' gets highlighted in both places-->Type Names
This color applies to types in strongly typed languages such as Java, TypeScript, etc.
Typescript
const name: string = "John"; // 'string' gets highlighted
const allNames: Array<string> = [name]; // 'Array' and 'string' get highlightedJava
int N = 100; // 'N' gets highlighted
boolean[] isPrime = new boolean[N + 1]; // 'boolean' gets highlighted in both casesClass Names
When defining or, in some cases, using a class, this is the color that will be used.
Javascript
class Animal {
// 'Animal' gets highlighted
constructor(type) {
this.type = type;
}
}
const Fish = new Animal("catfish"); // 'Animal' gets highlighted
Python
class Person: # 'Person' gets highlighted
def __init__(self, name, age):
self.name = name
self.age = age
This color gets usually gets applied in HTML and JSX tag attributes.Attribute Names
HTML
<div className="dog" id="the-dog"></div>
<!--'className' and 'id' get highlighted-->
JSX
const MyComponent = (props) => {
// 'passedProp' gets highlighted
return (
<OtherComponent passedProp={props.prop}>
<div>{props.children}</div>
</OtherComponent>
);
};
This color applies to all code comments.Comments
Javascript
// This comment gets colored
Python
# This comment gets colored
This color refers to strings in code.Strings
Javascript
console.log("hello!"); // '"hello"' gets highlighted
Python
print("hi!") // '"hi!"' gets highlighted
This color refers to all numerical values including integers, floats, doubles, and more.Numbers
Javascript
console.log(12345); // '12345' gets highlighted
Python
print(54321) # '54321' gets highlighted
This color gets applied to boolean values likeBooleans
true
andfalse
.
Javascript
const t = true; // 'true' gets highlighted
const f = false; // 'false' gets highlighted
Python
t = True # 'True' is highlighted
f = False # 'False' is highlighted
This color gets applied for regular expressions.Regular Expressions
Javascript
const str = "ohhh hello world!";
const matchOs = str.match(/o/gi); // '/o/ig' gets highlighted
Operators such asOperators
+
,-
,*
,/
, and more get highlighted with this color.
Javascript
console.log(5 + (3 % 2)); // '.', '+', and '%' get highlighted
Python
if len("dog") == 3: # '==' gets highlighted
print("dog is " + "3" + " characters long") # '+' gets highlighted in both cases
This colors square brackets, usually theSquare Brackets
[
and]
characters.
Javascript
const arr = [0, 1, 2, 3, 4, 5]; // '[' and ']' get highlighted
Python
arr = [0, 1, 2, 3, 4, 5]; # '[' and ']' get highlighted
This colors angle brackets, usually theAngle Brackets
<
and>
characters, when they aren't being used as part of HTML and JSX tags or other token types.
HTML
<h1>Hi, World!</h1>
<!--'<' and '>' on both sides of each tag get highlighted-->
Congratulations on getting your syntax highlighting colors customized! Now let's learn how to further improve the design of your theme.