function greet(name) {
  console.log(`Hello, ${name}!`);
  return `Welcome, ${name}!`;
}

const user = "World";
greet(user);

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

function createUser(userData: User): User {
  return {
    ...userData,
    id: Date.now(),
  };
}

const newUser: User = createUser({
  id: 1,
  name: "John Doe",
  email: "john@example.com"
});

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

export default Counter;

#!/bin/bash

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

.code-block {
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 8px;
  padding: 1rem;
  overflow-x: auto;
}

.syntax-highlight {
  font-family: 'Monaco', 'Courier New', monospace;
  font-size: 14px;
  line-height: 1.5;
}

{
  "name": "personal-blog",
  "version": "1.0.0",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "^15.0.0",
    "react": "^19.0.0"
  }
}

This is a plain code block without syntax highlighting. 
It should still have a copy button and basic styling.