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.