BasinasLabs

Testing Code Copy Functionality

•1 min read
TestingDevelopmentFeatures

Testing Code Copy Functionality

This post contains various code blocks to test the new copy button functionality.

JavaScript Example

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

// Usage
const user = "Developer";
greetUser(user);

Python Example

def calculate_fibonacci(n):
    """Calculate the nth Fibonacci number."""
    if n <= 1:
        return n
    
    a, b = 0, 1
    for i in range(2, n + 1):
        a, b = b, a + b
    
    return b

# Example usage
result = calculate_fibonacci(10)
print(f"The 10th Fibonacci number is: {result}")

CSS Example

.code-block {
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 16px;
  font-family: 'Monaco', 'Consolas', monospace;
  overflow-x: auto;
}

.copy-button {
  position: absolute;
  top: 12px;
  right: 12px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.code-block:hover .copy-button {
  opacity: 1;
}

HTML Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BasinasLabs - Code Copy Test</title>
</head>
<body>
    <main>
        <h1>Welcome to BasinasLabs</h1>
        <p>Testing the code copy functionality!</p>
        <button onclick="copyCode()">Copy Code</button>
    </main>
</body>
</html>

Inline Code

You can also have inline code like this: const greeting = "Hello World!";

The copy button should appear on hover for each code block above. Try hovering over the code blocks and clicking the copy button to test the functionality!