import { html, cssManager } from '@design.estate/dees-element'; export const demoFunc = () => html`
TypeScript Code Example
A comprehensive TypeScript code example with various syntax highlighting.
interface User { id: number; name: string; email: string; isActive: boolean; } class UserService { private users: User[] = []; constructor(private apiUrl: string) { console.log('UserService initialized'); } async getUsers(): Promise { try { const response = await fetch(this.apiUrl); const data = await response.json(); return data.users; } catch (error) { console.error('Failed to fetch users:', error); return []; } } addUser(user: User): void { this.users.push(user); } } // Usage example const service = new UserService('https://api.example.com/users'); const users = await service.getUsers(); console.log('Found users:', users.length);
JavaScript Example
Modern JavaScript with ES6+ features.
// Array manipulation examples const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map(n => n * 2); const filtered = numbers.filter(n => n > 3); // Object destructuring const user = { name: 'John', age: 30, city: 'New York' }; const { name, age } = user; // Promise handling const fetchData = async (url) => { const response = await fetch(url); return response.json(); }; // Modern syntax const greet = (name = 'World') => \`Hello, \${name}!\`; console.log(greet('ShadCN'));
Python Example
Python code with classes and type hints.
from typing import List, Optional import asyncio class DataProcessor: """A simple data processor class""" def __init__(self, name: str): self.name = name self.data: List[dict] = [] async def process_data(self, items: List[dict]) -> List[dict]: """Process data items asynchronously""" results = [] for item in items: # Simulate async processing await asyncio.sleep(0.1) results.append({ 'id': item.get('id'), 'processed': True, 'processor': self.name }) return results def get_summary(self) -> dict: return { 'processor': self.name, 'items_processed': len(self.data) } # Usage processor = DataProcessor("Main") data = await processor.process_data([{'id': 1}, {'id': 2}])
CSS Example
Modern CSS with custom properties and animations.
/* Modern CSS with custom properties */ :root { --primary-color: #3b82f6; --secondary-color: #10b981; --background: #ffffff; --text-color: #09090b; --border-radius: 6px; } .card { background: var(--background); border: 1px solid #e5e7eb; border-radius: var(--border-radius); padding: 24px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); transition: all 0.2s ease; } .card:hover { transform: translateY(-2px); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
`