1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13

import React, { useState } from 'react'

function Counter() {
  const [count, setCount] = useState(0)
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  )
}

export default Counter

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11

interface User {
  id: string
  name: string
  email?: string
}

function greet(user: User): string {
  return `Hello, ${user.name}!`
}

export { greet }

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10

def fibonacci(n: int):
    """Generate Fibonacci sequence up to n terms"""
    sequence = []
    a, b = 0, 1
    while len(sequence) < n:
        sequence.append(a)
        a, b = b, a + b
    return sequence

print(fibonacci(10))

1. 1
2. 2
3. 3
4. 4
5. 5

# List all files including dotfiles
ls -la

# Create a folder and move into it
mkdir demo && cd demo

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8

{
  "name": "demo",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "next dev"
  }
}

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12

name: CI
on:
  push:
    branches: [ main ]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20

1. 1
2. 2
3. 3
4. 4

<section class="hero">
  <h1>Welcome</h1>
  <p>Minimal example</p>
</section>

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9

:root {
  --brand: #2563eb;
}

.button {
  background: var(--brand);
  color: #fff;
  border-radius: 0.5rem;
}

1. 1
2. 2

// A very long line that should scroll horizontally without breaking the layout or overflowing the container on small screens — this line intentionally exceeds typical widths to validate the scroll behavior in our CodeBlock implementation
const url = "https://example.com/some/really/long/path/with/many/segments/and/query?param1=one&param2=two&param3=three&param4=four&param5=five&param6=six";

1. 1

1. 1

1. 1
2. 2
3. 3

This code block has no language hint. It should still render with header labeled as "Code" and allow copying.
Line 2
Line 3

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9

import type { FC } from 'react'

type Props = { label: string }

const Button: FC<Props> = ({ label }) => (
  <button className="rounded bg-blue-600 px-3 py-1 text-white">{label}</button>
)

export default Button

1. 1
2. 2
3. 3
4. 4
5. 5

SELECT id, name, created_at
FROM users
WHERE active = true
ORDER BY created_at DESC
LIMIT 10;

1. 1
2. 2
3. 3

fn main() {
    println!("Hello, world!");
}

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6

package main
import "fmt"

func main() {
  fmt.Println("Hello, Go")
}

1. 1
2. 2
3. 3

console.log('Leading blank line preserved')

1. 1

print('Trailing newline preserved')\n