Code Blocks Reference

Advanced code presentation — multi-language tabs and syntax theme configuration.

Multi-Language Examples

Show the same concept in multiple languages with code tabs. Usecode-tabsfor a streamlined, code-first experience with auto-sync, language icons, and copy buttons.

Syntax

Tab labels are automatically derived from the code fence language—no extra markers needed:

:::{code-tabs}

```python
print("Hello")
```

```javascript
console.log("Hello");
```

```bash
echo "Hello"
```

:::

Result

def greet(name):
    """Say hello to someone."""
    print(f"Hello, {name}!")

greet("World")

function greet(name) {
    // Say hello to someone
    console.log(`Hello, ${name}!`);
}

greet("World");

# Say hello
greet() {
    echo "Hello, $1!"
}

greet "World"

With Filenames and Highlights

Add filenames and line highlights directly in the code fence info string:

import requests

def get_users():
    response = requests.get("/api/users")
    return response.json()

import fetch from 'node-fetch';

async function getUsers() {
    const response = await fetch('/api/users');
    return response.json();
}

# Get all users
curl -X GET "https://api.example.com/users" \
  -H "Authorization: Bearer $API_KEY"

Custom Tab Labels

Usetitle="..."to override the default language-derived label:

:::{code-tabs}

```javascript title="React"
const [count, setCount] = useState(0);
```

```javascript title="Vue"
const count = ref(0);
```

:::

Files Without Extensions

For files likeDockerfile that have no extension, use title=:

:::{code-tabs}

```dockerfile title="Dockerfile"
FROM python:3.14-slim
```

```yaml docker-compose.yml
services:
  web:
    build: .
```

:::

Code Tabs vs Tab-Set

Syntax Themes

Bengal's syntax highlighting uses Rosettes, which provides configurable themes that adapt to light/dark mode.

Available Themes

Configuration

Configure syntax highlighting inconfig/_default/theme.yaml:

theme:
  # Site palette (syntax inherits from this when theme is "auto")
  default_palette: "snow-lynx"

  syntax_highlighting:
    # Theme selection:
    # - "auto": Inherit from default_palette (recommended)
    # - Specific theme name: "monokai", "dracula", etc.
    theme: "auto"

    # CSS class output style:
    # - "semantic": Human-readable classes (.syntax-function, .syntax-string)
    # - "pygments": Pygments-compatible short classes (.nf, .s)
    css_class_style: "semantic"

Palette Inheritance

Whentheme: "auto" is set, the syntax theme automatically inherits from your site's default_palette:

CSS Class Styles

Rosettes supports two CSS class naming conventions:

<span class="syntax-function">greet</span>
<span class="syntax-string">"Hello"</span>
<span class="syntax-keyword">def</span>

<span class="nf">greet</span>
<span class="s">"Hello"</span>
<span class="k">def</span>