Code Syntax Highlighting Examples

May 18, 2025

code programming tech

A showcase of syntax highlighting for various programming languages including Python, JavaScript, HTML/CSS, SQL, and Bash. Perfect for developers looking for clean code presentation examples.

Image for Code Syntax Highlighting Examples

This post demonstrates code syntax highlighting using the Lightbulb theme in various programming languages.

Python Example

# A simple Python class
class Person:
    def __init__(self, name, age):
        self.name = name
        self.age = age

    def greet(self):
        print(f"Hello, my name is {self.name} and I'm {self.age} years old!")

    @property
    def is_adult(self):
        return self.age >= 18

# Create a new person and greet
john = Person("John Doe", 30)
john.greet()

if john.is_adult:
    print("John is an adult")

JavaScript Example

// A simple JavaScript component
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    this.increment = this.increment.bind(this);
  }

  increment() {
    this.setState(state => ({
      count: state.count + 1
    }));
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

// Create and render the component
const container = document.getElementById('app');
ReactDOM.render(<Counter />, container);

HTML & CSS Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Styled Page</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            line-height: 1.6;
            color: #333;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }

        .card {
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }

        .card h2 {
            color: #0066cc;
            margin-top: 0;
        }
    </style>
</head>
<body>
    <div class="card">
        <h2>Welcome to My Page</h2>
        <p>This is an example of HTML with embedded CSS.</p>
    </div>
</body>
</html>

SQL Example

-- Create a table for users
CREATE TABLE users (
    id SERIAL PRIMARY KEY,
    username VARCHAR(50) NOT NULL UNIQUE,
    email VARCHAR(100) NOT NULL UNIQUE,
    password_hash VARCHAR(128) NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Insert some sample data
INSERT INTO users (username, email, password_hash) VALUES
    ('john_doe', 'john@example.com', 'hashed_password_1'),
    ('jane_smith', 'jane@example.com', 'hashed_password_2');

-- Query to find users
SELECT id, username, email 
FROM users 
WHERE created_at > '2025-01-01'
ORDER BY username ASC;

Bash Script Example

#!/bin/bash

# A simple backup script
BACKUP_DIR="/var/backups/$(date +%Y-%m-%d)"
SOURCE_DIR="/home/user/data"

# Create backup directory if it doesn't exist
if [ ! -d "$BACKUP_DIR" ]; then
    mkdir -p "$BACKUP_DIR"
    echo "Created backup directory: $BACKUP_DIR"
fi

# Perform backup
echo "Starting backup at $(date)"
tar -czf "$BACKUP_DIR/data_backup.tar.gz" "$SOURCE_DIR"

# Check result
if [ $? -eq 0 ]; then
    echo "Backup completed successfully!"
else
    echo "Backup failed!" >&2
    exit 1
fi

This page demonstrates how the Lightbulb syntax highlighting theme can make your code more readable and visually appealing.