Code blocks and groups

Overview

Use code blocks to show syntax-highlighted code with a built-in copy button. Use Code Groups when you want tabs (for example, “JavaScript,” “Python,” and “cURL”) so readers can switch between multiple examples in one place.

You can work with code in two ways:

• Editor UI: Insert Code and Code Group blocks from the / menu.

• MDX/Markdown: Use fenced code blocks and the <CodeGroup> component.

Common use cases:

• Single code snippets with syntax highlighting

• Multiple language examples in tabs

• Before and after code comparisons

• API examples across different SDKs

const myFunction = () => {
  console.log("Hello Documentation.AI");
};

Code blocks in the editor UI

Add a code block

1. Place your cursor on a new line.

2. Type / and select Code.

3. A code block appears with the placeholder “Add your code here….”

4. Paste or type your code into the block.

Choose the language

• Use the language dropdown on the top-right of the block to select a language.

• You can search by name (for example, “TypeScript,” “Python,” or “Bash”).

• The selected language controls syntax highlighting.

Common actions

• Copy: Use the copy button (shown on hover) to copy the entire block.

• Duplicate: Use the duplicate icon (if available in your toolbar) to clone the block.

• Delete: Use the trash icon to remove the block.

• Reorder: Use the drag handle on the left to move the code block up or down.

All features described below (line highlighting, focus, line numbers, etc.) are also supported by code blocks created from the editor UI—they’re backed by the same fenced-code syntax under the hood.

Code groups in the editor UI

Use Code Group when you want multiple tabs (for example, different languages) in a single block.

Add a code group

1. Place your cursor on a new line.

2. Type / and select Code Group.

3. A group is created with a default tab (for example, Tab 1) and a code editor area.

Work with tabs

• Add a tab: Click the + icon next to the existing tab label.

• Rename a tab: Double-click the tab label (for example, “Tab 1”) and type a new name.

• Switch tabs: Click a tab to switch between code examples.

• Duplicate or delete the group: Use the duplicate and trash icons on the right of the group toolbar.

Inside each tab, you can:

• Paste or type your code.

• Select the language from the language dropdown (per tab).

Code groups created in the editor are equivalent to <CodeGroup> components in MDX.

Inline code in Editor UI

Use inline code for short snippets such as function names, commands, or flags that appear inside normal sentences.

1. Type your sentence as normal.

2. Select the word or phrase you want to format as code.

3. In the floating toolbar, click the code icon <>.

The selected text is rendered in a monospace font with code styling. You can click the icon again to remove the code formatting.

Code blocks with MDX/Markdown

Use fenced code blocks with three backticks and a language identifier for syntax highlighting.

const apiCall = async () => {
  const response = await fetch('/api/docs');
  return response.json();
};

```typescript
const apiCall = async () => {
  const response = await fetch('/api/docs');
  return response.json();
};
```

Supported languages

Popular languages:
typescript, javascript, python, java, go, rust, php, ruby, csharp

Web technologies:
html, css, json, xml, graphql

Shell & config:
bash, shell, yaml, dockerfile, sql

Other languages:
cpp, swift, kotlin, dart, markdown, plaintext

Line highlighting

Highlight specific lines using the highlight prop with line numbers or ranges:

const greeting = "Hello, World!";
function sayHello() {
  console.log(greeting);
}
sayHello();

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

Line focus

Use the focus prop to blur non-focused lines, drawing attention to specific code sections:

const greeting = "Hello, World!";
function sayHello() {
  console.log(greeting);
}
sayHello();

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

With line numbers

Combine highlighting with line numbers for better reference:

interface User {
  name: string;
  age: number;
}

```typescript
interface User {
  name: string;
  age: number;
}
```

These props work for both standalone code blocks and code blocks inside CodeGroup.

CodeGroup in MDX

Use <CodeGroup> to organize multiple code blocks in tabbed interfaces. This matches the behavior of Code Group in the editor UI.

<CodeGroup tabs="TypeScript,Python,Bash">
```typescript
const response = await fetch('/api/docs', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ title: 'Getting Started' })
});
```

```python
import requests
response = requests.post('/api/docs',
  json={'title': 'Getting Started'}
)
```

```bash
curl -X POST https://api.example.com/docs \
  -H "Content-Type: application/json" \
  -d '{"title": "Getting Started"}'
```
</CodeGroup>

const response = await fetch('/api/docs', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ title: 'Getting Started' })
});

import requests
response = requests.post('/api/docs',
  json={'title': 'Getting Started'}
)

curl -X POST https://api.example.com/docs \
  -H "Content-Type: application/json" \
  -d '{"title": "Getting Started"}'

Auto-detected tabs

Without the tabs attribute, CodeGroup automatically uses language identifiers as tab names:

const example = "This tab shows: typescript";

example = "This tab shows: python"

<CodeGroup>
```typescript
const example = "This tab shows: typescript";
```

```python
example = "This tab shows: python"
```
</CodeGroup>

CodeGroup with highlighting and focus

Line highlighting and focus effects work within CodeGroup tabs:

const greeting = "Hello, World!";
function sayHello() {
  console.log(greeting);
}

const greeting = "Hello, World!";
function sayHello() {
  console.log(greeting);
}

<CodeGroup tabs="Highlighted,Focused">
```javascript
const greeting = "Hello, World!";
function sayHello() {
  console.log(greeting);
}
```

```javascript
const greeting = "Hello, World!";
function sayHello() {
  console.log(greeting);
}
```
</CodeGroup>

Nested code examples

Use four backticks to show code block examples within documentation:

````typescript
```typescript
function calculateTotal(price: number, tax: number): number {
  return price + (price * tax);
}
```
````

Attributes

Inline code using MDX

Wrap the word or phrase in single backticks (`) to mark it as inline code:

To denote a `word` or `phrase` as code, enclose it in backticks (`).

Common patterns

• Syntax highlighting: Language identifiers or the UI language dropdown.

• Multi-language examples: CodeGroup tabs for SDK comparisons (JavaScript, Python, Go).

• Related code samples: Group request/response, before/after, or setup/usage examples.

• Documentation examples: Nested code blocks using four backticks for meta-documentation.

• Line highlighting: Draw attention to important lines with highlight="1-3,5".

• Line focus: Emphasize specific sections with focus="2,4-6" while dimming the rest.

• Tutorials: Combine line numbers, highlighting, and focus for step-by-step guides.

Whether you use the editor UI or MDX, the underlying behavior is the same—pick the workflow that best matches how you and your team like to write docs.