NgocDev
Code Block Test

Code Block Test

NgocDevInvalid DateUpdated 1 week ago

Code Block Test

This is a test of the new Shiki-powered code block component.

JavaScript Example#

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

TypeScript Example#

interface User {
  id: number;
  name: string;
  email: string;
}
 
function createUser(userData: Partial<User>): User {
  return {
    id: Math.random(),
    name: userData.name || "Anonymous",
    email: userData.email || "user@example.com"
  };
}
 
const user = createUser({ name: "John Doe" });

Python Example#

def fibonacci(n):
    if n <= 1:
        return n
    else:
        return fibonacci(n-1) + fibonacci(n-2)
 
# Generate first 10 fibonacci numbers
for i in range(10):
    print(f"F({i}) = {fibonacci(i)}")

CSS Example#

.code-block-wrapper {
  margin: 1.5rem 0;
  border-radius: 0.5rem;
  overflow: hidden;
  border: 1px solid #e5e7eb;
}
 
.code-header {
  background: #f3f4f6;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  color: #6b7280;
}

Inline Code#

Here is some inline code within a paragraph. This should be styled differently from the code blocks above.

JSON Example#

{
  "name": "ngocdev",
  "version": "0.1.0",
  "dependencies": {
    "next": "15.3.4",
    "react": "^19.1.0",
    "shiki": "^3.7.0"
  }
}
End of article