Code Highlights

What are code highlights?

Code highlights use color and formatting to make different parts of code visually distinct, improving readability and understanding.

Benefits of code highlights?

• Identify different code elements quickly
• Spot syntax errors visually
• Make code easier to read
• Distinguish keywords from variables
• Improve code understanding

// Keywords are highlighted
const player = { name: 'Astro', health: 100 };
let position = 0;

// Function keywords highlighted
function movePlayer(x, y) {
    // Comments are typically green
    player.x = x;
    player.y = y;
    // Strings are shown in quotes
    console.log("Player moved");
}

// Numbers highlighted differently
const distance = 100;
const multiplier = 2.5;

// Booleans highlighted
const isAlive = true;
const canMove = player.health > 0;

What does this code do?

• Keywords like const, let, function are highlighted differently
• Comments appear in one color (usually green)
• Strings in quotes appear in another color
• Numbers highlighted separately from identifiers
• Boolean values like true and false highlighted
• Syntax highlighting helps catch errors quickly

// Highlighting helps spot errors
class GameObject {
    constructor(x, y) {
        this.x = x;
        this.y = y;
        // Missing closing brace here would be highlighted
    }
    
    // Method highlighted differently from variables
    move(dx, dy) {
        this.x += dx;
        this.y += dy;
    }
    
    // Return type highlighted
    getPosition() {
        return { x: this.x, y: this.y };
    }
}

// Undefined variables would be highlighted
const obj = new GameObject(100, 300);

What does this code do?

• Class keyword highlighted differently from class name
• Constructor method highlighted
• Comments shown in special color
• String literals shown in quotes
• Numbers highlighted separately
• Curly braces and syntax highlighted
• Highlighting helps catch syntax errors immediately

---

layout: post title: Code Highlights description: Learn about code highlights permalink: /code_highlights author: Vihaan Budhraja —

Try It Yourself

%%js // CODE_RUNNER: code-highlights // Variable declarations - highlighted differently const health = 100; let mana = 50;

// Function calls - highlighted differently function attack() { return “Attack!”; }

// Control flow keywords if (health > 0) { console.log(attack()); }