Home Kyle Bario
test-catppuccin!
Testing Catppuccin Mocha Theme

Testing Catppuccin Mocha Theme

This is a test post to showcase the beautiful Catppuccin Mocha theme for code blocks in your Astro blog.

JavaScript Example

// This is a comment
const greeting = 'Hello, World!';
const numbers = [1, 2, 3, 4, 5];

function calculateSum(arr) {
  return arr.reduce((sum, num) => sum + num, 0);
}

const result = calculateSum(numbers);
console.log(`${greeting} The sum is: ${result}`);

TypeScript Example

interface User {
  id: number;
  name: string;
  email: string;
  isActive: boolean;
}

class UserService {
  private users: User[] = [];

  addUser(user: User): void {
    this.users.push(user);
  }

  getUserById(id: number): User | undefined {
    return this.users.find((user) => user.id === id);
  }

  getActiveUsers(): User[] {
    return this.users.filter((user) => user.isActive);
  }
}

CSS Example

/* Catppuccin Mocha Theme Colors */
:root {
  --ctp-mocha-rosewater: #f5e0dc;
  --ctp-mocha-flamingo: #f2cdcd;
  --ctp-mocha-pink: #f5c2e7;
  --ctp-mocha-mauve: #cba6f7;
  --ctp-mocha-red: #f38ba8;
  --ctp-mocha-maroon: #eba0ac;
  --ctp-mocha-peach: #fab387;
  --ctp-mocha-yellow: #f9e2af;
  --ctp-mocha-green: #a6e3a1;
  --ctp-mocha-teal: #94e2d5;
  --ctp-mocha-sky: #89dceb;
  --ctp-mocha-sapphire: #74c7ec;
  --ctp-mocha-blue: #89b4fa;
  --ctp-mocha-lavender: #b4befe;
  --ctp-mocha-text: #cdd6f4;
  --ctp-mocha-base: #1e1e2e;
}

.code-block {
  background-color: var(--ctp-mocha-base);
  color: var(--ctp-mocha-text);
  border-radius: 8px;
  padding: 1rem;
  font-family: 'JetBrains Mono', monospace;
}

Python Example

import asyncio
from typing import List, Optional

class DataProcessor:
    def __init__(self, data: List[int]):
        self.data = data
        self.processed_count = 0

    async def process_data(self) -> List[int]:
        """Process the data asynchronously"""
        results = []
        for item in self.data:
            # Simulate some processing
            await asyncio.sleep(0.1)
            processed_item = item * 2
            results.append(processed_item)
            self.processed_count += 1

        return results

    def get_stats(self) -> dict:
        return {
            "total_items": len(self.data),
            "processed_items": self.processed_count,
            "completion_rate": self.processed_count / len(self.data) * 100
        }

# Usage example
async def main():
    processor = DataProcessor([1, 2, 3, 4, 5])
    results = await processor.process_data()
    stats = processor.get_stats()

    print(f"Results: {results}")
    print(f"Stats: {stats}")

if __name__ == "__main__":
    asyncio.run(main())

HTML Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0" />
    <title>Catppuccin Mocha Theme</title>
    <style>
      body {
        background-color: #1e1e2e;
        color: #cdd6f4;
        font-family: 'Noto Sans', sans-serif;
      }

      .container {
        max-width: 800px;
        margin: 0 auto;
        padding: 2rem;
      }

      .highlight {
        background-color: #313244;
        padding: 1rem;
        border-radius: 8px;
        border-left: 4px solid #cba6f7;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>Welcome to Catppuccin Mocha</h1>
      <div class="highlight">
        <p>This is a beautiful dark theme with warm colors!</p>
      </div>
    </div>
  </body>
</html>

Inline Code Examples

You can also use inline code with the Catppuccin theme. Here are some examples:

The Catppuccin Mocha theme provides excellent contrast and readability while maintaining a warm, cozy aesthetic that’s easy on the eyes during long coding sessions.