💻 Editora - Code Sample Test

Testing syntax highlighting and code sample features

Code Sample Integration
This editor demonstrates advanced code sample functionality including syntax highlighting, multiple programming languages, and code formatting using the full webcomponent interface.

📝 Code Features

💡 How to Test Code Features

🌐 Sample Code Snippets

Here are some example code snippets you can copy and paste into the editor:

JavaScript Function

function calculateTotal(items) {
  return items.reduce((total, item) => {
    return total + (item.price * item.quantity);
  }, 0);
}

// Usage example
const cart = [
  { name: 'Laptop', price: 1299.99, quantity: 1 },
  { name: 'Mouse', price: 29.99, quantity: 2 }
];

console.log('Total:', calculateTotal(cart));

Python Class

class UserManager:
    def __init__(self):
        self.users = {}

    def add_user(self, user_id, name, email):
        self.users[user_id] = {
            'name': name,
            'email': email,
            'created_at': datetime.now()
        }

    def get_user(self, user_id):
        return self.users.get(user_id)

# Usage
manager = UserManager()
manager.add_user(1, 'John Doe', 'john@example.com')

HTML Component

<div class="card">
  <h3>Card Title</h3>
  <p>This is a sample card component.</p>
  <button onclick="alert('Clicked!')">Click me</button>
</div>

CSS Styles

.card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  padding: 20px;
  margin: 10px;
  transition: transform 0.2s;
}

.card:hover {
  transform: translateY(-2px);
}

Code Sample Test Document

This editor is optimized for testing code sample functionality and syntax highlighting.

🧪 Testing Code Features

Use this space to test various code-related features:

📋 Sample Code Blocks

JavaScript Example

Here's a JavaScript function for handling form validation:

function validateEmail(email) {
  const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return regex.test(email);
}

function validateForm(formData) {
  const errors = [];

  if (!formData.name.trim()) {
    errors.push('Name is required');
  }

  if (!validateEmail(formData.email)) {
    errors.push('Valid email is required');
  }

  return errors;
}

Python Data Processing

A Python script for processing CSV data:

import csv
from collections import defaultdict

def process_sales_data(filename):
    sales_by_product = defaultdict(float)

    with open(filename, 'r') as file:
        reader = csv.DictReader(file)
        for row in reader:
            product = row['product']
            sales = float(row['sales'])
            sales_by_product[product] += sales

    return dict(sales_by_product)

# Usage
sales_data = process_sales_data('sales.csv')
for product, total in sales_data.items():
    print(f"{product}: ${total:.2f}")

HTML Template

A responsive HTML card component:

<div class="product-card">
  <img src="product.jpg" alt="Product Image" class="product-image">
  <div class="product-info">
    <h3 class="product-title">Premium Widget</h3>
    <p class="product-description">
      High-quality widget with advanced features.
    </p>
    <div class="product-price">$99.99</div>
    <button class="add-to-cart-btn">Add to Cart</button>
  </div>
</div>

CSS Styling

Modern CSS with flexbox and grid:

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
}

.product-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.3s ease;
}

.product-card:hover {
  transform: translateY(-5px);
}

.product-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

🎯 Test Area

Create your own code samples below. Try inserting code blocks and testing syntax highlighting for different languages:

 

 

 

 

 

🔌 WebComponent Status

Loading webcomponent...