Overview

The <CodeBlock> component displays single code snippets with syntax highlighting, optional filename headers, and copy-to-clipboard functionality.

Basic Usage

Standard markdown code blocks automatically use CodeBlock:

```javascript
const greeting = "Hello, World!";
console.log(greeting);
```

const greeting = "Hello, World!";
console.log(greeting);

With Filename

Add a filename to the code block header:

```typescript filename="src/app.ts"
import express from "express";

const app = express();
app.listen(3000);
```

Supported Languages

CodeBlock supports 200+ programming languages through Shiki:

• Web: JavaScript, TypeScript, HTML, CSS, JSX, TSX
• Backend: Python, Ruby, PHP, Java, Go, Rust, C#
• Shell: Bash, PowerShell, Zsh
• Data: JSON, YAML, TOML, XML
• Query: SQL, GraphQL
• Markup: Markdown, MDX
• And many more...

Features

Syntax Highlighting

Powered by Shiki with accurate, theme-aware highlighting:

interface User {
  id: string;
  email: string;
  role: "admin" | "user";
}

const user: User = {
  id: "123",
  email: "user@example.com",
  role: "user",
};

Copy Button

Every code block includes a copy button in the top-right corner for easy code copying.

Theme Synchronization

Code blocks automatically switch between light and dark themes based on your site's color mode.

Language Examples

JavaScript/TypeScript

// Async/await example
async function fetchUser(id) {
  const response = await fetch(`/api/users/${id}`);
  return response.json();
}

Python

# List comprehension
squares = [x**2 for x in range(10)]

# Dictionary
user = {
    "name": "John Doe",
    "email": "john@example.com"
}

JSON

{
  "name": "My App",
  "version": "1.0.0",
  "dependencies": {
    "react": "^18.2.0",
    "next": "^14.0.0"
  }
}

Shell Commands

# Install dependencies
npm install

# Run development server
npm run dev

# Build for production
npm run build

SQL

SELECT
  users.id,
  users.name,
  COUNT(orders.id) as order_count
FROM users
LEFT JOIN orders ON users.id = orders.user_id
GROUP BY users.id, users.name
HAVING COUNT(orders.id) > 5;

Inline Code

Use single backticks for inline code: const x = 42;

Best Practices

Choose the Right Language

Specify the correct language for accurate highlighting:

Good: ```typescript Avoid: ```text or ``` (no language)

Keep Code Readable

• Use appropriate indentation
• Add comments for complex logic
• Break long lines for readability

---

Next, learn about the Changelog Component for release notes.