Skip to main content

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!

  • Variable Names

    Usually this color is applied when you use or define a variable in which no declaration keyword is used.

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
  • Variable Definitions

    This color gets put into use when defining a variable with a definition keyword such as 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
}
}
  • Function References

    This color gets applied when you call a function.

Javascript

function run() {
console.log("I'm Running!");
}
run(); // 'run' is highlighted

Python

def dog_bark():
print("Woof!")
dog_bark() # 'dog_bark' is highlighted
  • Function Definitions

    When defining a function, this is the color that your function definition will be.

Javascript

function run() {
// 'run' is highlighted
console.log("I'm Running!");
}

Python

def dog_bark(): # 'dog_bark' is highlighted
print("Woof!")
  • Keywords

    This one color highlights the important keywords in your code such as variable definitions, class definitions, imports/exports, and more!

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
  • Property Names

    This color gets applied when accessing a property from a variable.

Javascript

const person = {
name: "John",
job: "Programmer",
};
const { job } = person; // 'job' is highlighted
console.log(person.name, job); // 'name' is highlighted
  • Property Definitions

    This color gets applied when defining a method or property.

Javascript

class Person {
constructor(name, job) {
// 'constructor' gets highlighted
this.name = name;
this.job = job;
this.stats = {
weight: 200, // 'weight' gets highlighted
};
}
}
  • Function Properties

    This color gets applied when calling a method.

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 highlighted

    Java

    int N = 100; // 'N' gets highlighted
    boolean[] isPrime = new boolean[N + 1]; // 'boolean' gets highlighted in both cases
  • Class 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
  • Attribute Names

    This color gets usually gets applied in HTML and JSX tag attributes.

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>
);
};
  • Comments

    This color applies to all code comments.

Javascript

// This comment gets colored

Python

# This comment gets colored
  • Strings

    This color refers to strings in code.

Javascript

console.log("hello!"); // '"hello"' gets highlighted

Python

print("hi!") // '"hi!"' gets highlighted
  • Numbers

    This color refers to all numerical values including integers, floats, doubles, and more.

Javascript

console.log(12345); // '12345' gets highlighted

Python

print(54321) # '54321' gets highlighted
  • Booleans

    This color gets applied to boolean values like true and false.

Javascript

const t = true; // 'true' gets highlighted
const f = false; // 'false' gets highlighted

Python

t = True # 'True' is highlighted
f = False # 'False' is highlighted
  • Regular Expressions

    This color gets applied for regular expressions.

Javascript

const str = "ohhh hello world!";
const matchOs = str.match(/o/gi); // '/o/ig' gets highlighted
  • Operators

    Operators such as +, -, *, /, 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
  • Square Brackets

    This colors square brackets, usually the [ 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
  • Angle Brackets

    This colors angle brackets, usually the < 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.

Was this helpful?