CodeBlock

Usage

Write code with plain markdown fences — all features work automatically.

```typescript
const app = createServer();
app.listen(3000);
```

const app = createServer();
app.listen(3000);

Use <CodeBlock> only when you need an explicit JSX element — for example, inside a custom component that doesn't preserve fence metadata.

<CodeBlock title="server.ts" language="typescript">
{`const app = createServer();
app.listen(3000);`}
</CodeBlock>

const app = createServer();
app.listen(3000);

Meta options

Add options after the language tag. These work on markdown fences only (not the <CodeBlock> component).

Line numbers

```typescript lines
import { createClient } from "@supabase/supabase-js";

const supabase = createClient(
  process.env.SUPABASE_URL!,
  process.env.SUPABASE_ANON_KEY!
);

const { data } = await supabase.from("pages").select("*");
```

import { createClient } from "@supabase/supabase-js";

const supabase = createClient(
  process.env.SUPABASE_URL!,
  process.env.SUPABASE_ANON_KEY!
);

const { data } = await supabase.from("pages").select("*");

Highlight lines

```typescript highlight={1,4-6}
import { createClient } from "@supabase/supabase-js";

const supabase = createClient(
  process.env.SUPABASE_URL!,
  process.env.SUPABASE_ANON_KEY!
);

const { data } = await supabase.from("pages").select("*");
```

import { createClient } from "@supabase/supabase-js";

const supabase = createClient(
  process.env.SUPABASE_URL!,
  process.env.SUPABASE_ANON_KEY!
);

const { data } = await supabase.from("pages").select("*");

Focus lines

Dims everything except the focused lines. Hover the block to reveal dimmed lines.

```typescript focus={4-6}
import { createClient } from "@supabase/supabase-js";

const supabase = createClient(
  process.env.SUPABASE_URL!,
  process.env.SUPABASE_ANON_KEY!
);

const { data } = await supabase.from("pages").select("*");
```

import { createClient } from "@supabase/supabase-js";

const supabase = createClient(
  process.env.SUPABASE_URL!,
  process.env.SUPABASE_ANON_KEY!
);

const { data } = await supabase.from("pages").select("*");

Word wrap

```bash wrap
curl -X POST https://api.example.com/v1/documents/create -H "Authorization: Bearer sk-1234567890abcdef" -H "Content-Type: application/json" -d '{"title": "Getting Started", "content": "This is a very long line that would normally overflow."}'
```

curl -X POST https://api.example.com/v1/documents/create -H "Authorization: Bearer sk-1234567890abcdef" -H "Content-Type: application/json" -d '{"title": "Getting Started", "content": "This is a very long line that would normally overflow the code block horizontally."}'

Expandable

Collapses code blocks with more than 15 lines. Click "Show more" to expand.

```python expandable
import os
from pathlib import Path

def process_documents(directory):
    results = []
    for path in sorted(Path(directory).rglob("*.md")):
        ...
```

import os
import json
from pathlib import Path

def process_documents(directory: str) -> list[dict]:
    """Walk a directory and process all markdown files."""
    results = []
    base = Path(directory)

    for path in sorted(base.rglob("*.md")):
        with open(path) as f:
            content = f.read()

        meta = extract_frontmatter(content)
        body = strip_frontmatter(content)

        results.append({
            "path": str(path.relative_to(base)),
            "title": meta.get("title", path.stem),
            "content": body,
            "word_count": len(body.split()),
        })

    return results

Title / filename

```typescript src/lib/db.ts
export const db = createClient(url, key);
```

export const db = createClient(url, key);

Combining options

```typescript lines highlight={3-5}
import { createClient } from "@supabase/supabase-js";

const supabase = createClient(
  process.env.SUPABASE_URL!,
  process.env.SUPABASE_ANON_KEY!
);
```

import { createClient } from "@supabase/supabase-js";

const supabase = createClient(
  process.env.SUPABASE_URL!,
  process.env.SUPABASE_ANON_KEY!
);

When to prefer fences

Props