Code Blocks

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

```
Plain code block
without syntax highlighting
```

```python{renderAsImage=true width=600 align=center}
def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

print([fibonacci(i) for i in range(10)])
```

```typescript{renderAsImage=true width=500}
interface Config {
  apiUrl: string;
  timeout: number;
}
```

```typescript{backgroundColor="#1e293b"}
interface Config {
  apiUrl: string;
  timeout: number;
}
```

```sql{renderAsImage=true width=500 align=center spacingBefore=20 spacingAfter=20}
SELECT * FROM users
WHERE status = 'active'
ORDER BY created_at DESC;
```

```typescript{caption="Configuration interface" anchor="code-config"}
interface Config {
  apiUrl: string;
  timeout: number;
}
```

See [Listing {num}](#code-config) for the configuration interface.

```mermaid{caption="System Architecture" anchor="fig-arch" align="center"}
graph LR
    A[Client] --> B[API]
    B --> C[Database]
```