article
1 min read
37 words

Syntax Highlighting Test

Testing VSCode-quality syntax highlighting with multiple languages

testcodedevelopment

Syntax Highlighting Test

Let's test the new VSCode-quality syntax highlighting with various languages!

JavaScript

// Complex JavaScript example
const greeting = (name) => {
  return `Hello, ${name}!`;
};
 
class User {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  async fetchData() {
    const response = await fetch('/api/user');
    return response.json();
  }
}
 
const user = new User('John', 30);
console.log(greeting(user.name));

TypeScript

interface Person {
  name: string;
  age: number;
  email?: string;
}
 
function greet(person: Person): string {
  return `Hello, ${person.name}! You are ${person.age} years old.`;
}
 
const john: Person = {
  name: 'John Doe',
  age: 30
};
 
console.log(greet(john));

Python

# Python example with classes and decorators
from typing import List, Optional
import asyncio
 
class DataProcessor:
    def __init__(self, data: List[str]):
        self.data = data
    
    @staticmethod
    def clean_text(text: str) -> str:
        return text.strip().lower()
    
    async def process(self) -> List[str]:
        return [self.clean_text(item) for item in self.data]
 
# Usage
processor = DataProcessor(['  Hello  ', 'WORLD'])
result = asyncio.run(processor.process())
print(result)  # ['hello', 'world']

CSS

/* Modern CSS with variables and nesting */
:root {
  --primary-color: #3b82f6;
  --spacing: 1rem;
}
 
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing);
  
  &:hover {
    transform: scale(1.02);
    transition: transform 0.3s ease;
  }
}
 
@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }
}

JSON

{
  "name": "example-project",
  "version": "1.0.0",
  "scripts": {
    "dev": "next dev",
    "build": "next build"
  },
  "dependencies": {
    "react": "^18.2.0",
    "next": "^14.0.0"
  }
}

Bash

#!/bin/bash
 
# Setup script
echo "Setting up project..."
 
if [ -d "node_modules" ]; then
  echo "Dependencies already installed"
else
  npm install
fi
 
npm run build
echo "Build complete!"

Inline Code

Here's some inline code: const x = 42; and more text. The inline code should look different from code blocks.

Comments

Comments are powered by Giscus. Join the discussion on GitHub!

Was this helpful? Share it with others!