---
title: Code editor: multi-language
slug: docs/code-editor-multi-language
docTags: 
createdAt: 2026-06-05T12:38:09.872Z
---

[Code editor: multi-language](docId:_DmwEwV5w9YcnVMlcUI53) blocks group multiple code snippets into a single container with a language switcher. They are useful for presenting examples in different programming languages without taking up additional space.

## Syntax

You can add this component using either Markdown or MDX.

::::Tabs
:::Tab{title="Markdown"}
````markdown
:::CodeblockTabs

```javascript
const greeting = 'Hello, world!'
console.log(greeting)
```

```python
greeting = "Hello, world!"
print(greeting)
```

```bash
echo "Hello, world!"
```

:::
````
:::

:::Tab{title="MDX"}
````javascript
<CodeblockTabs>

```javascript
const greeting = 'Hello, world!'
console.log(greeting)
```

```python
greeting = "Hello, world!"
print(greeting)
```

```bash
echo "Hello, world!"
```

</CodeblockTabs>
````
:::
::::

Each fenced code block inside a `CodeblockTabs` container becomes a separate tab. The tab title is automatically generated from the language identifier of the code block, such as `javascript`, `python`, or `bash`.

If you only need to display a single snippet, use a standard fenced code block instead.

````markdown
```javascript
const x = 1
```
````