Components

Code blocks and groups

Display inline code and code blocks with syntax highlighting, line highlighting, focus effects, and tabbed interfaces for multiple examples.

Overview

Display syntax-highlighted code with automatic copy functionality. Use CodeGroup to organize multiple code examples in tabbed interfaces for easy comparison.

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");
};

Inline code

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

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

Code blocks

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;
}
```

CodeGroup

Use CodeGroup to organize multiple code blocks in tabbed interfaces. Enables easy comparison between different languages or related examples.

<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' })
});

Auto-detected tabs

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

const example = "This tab shows: typescript";

<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);
}

<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

highlightstring

Line numbers or ranges to highlight. Examples: "1", "1-3", "1,3,5-7"

focusstring

Line numbers or ranges to focus on (blurs other lines). Examples: "2", "2-4", "1,4-6"

show-linesboolean | string

Set to {true} to show line numbers for all code blocks in the group.

tabsstring

Comma-separated custom tab names. Overrides auto-detected languages.

Common patterns

Syntax highlighting - Language identifiers enable automatic highlighting
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 using highlight="1-3,5"
Line focus - Emphasize specific sections with focus="2,4-6" to blur surrounding code
Tutorial examples - Combine line numbers and highlighting for step-by-step explanations