Code blocks

Every fenced code block is highlighted for its language, in a light and a dark theme that switch with the site, and has a button to copy it. The options below go on the block’s first line, after the language - or, for a single line, in a [!code ...] comment on that line.

Language

Write the language after the opening backticks: ```js, ```python, ```bash, ```json, ```yaml, ```mdx… Every common language is highlighted. ```text, or no language, shows plain text. To highlight a language as another one, see Code themes.

A ```mermaid block is drawn as a diagram.

Title

```js title="config.js"
export default { greeting: "hello" };
```

export default { greeting: "hello" };

The title can also follow the language directly, without title= - every word up to the first option is the title:

```bash Install with npm
npm install acme-sdk
```

npm install acme-sdk

In a CodeGroup, the title is the tab’s name.

Icon

icon shows an icon before the title - any icon:

```bash Terminal icon="terminal"
npm run build
```

npm run build

Highlighting lines

List the lines in braces - single lines and ranges. highlight={1,3-4} is the same:

```js {1,3-4}
const a = 1;
const b = 2;
const c = 3;
const d = 4;
```

const a = 1;
const b = 2;
const c = 3;
const d = 4;

Or mark the line itself with a comment, in the language’s own comment syntax. The comment isn’t shown, and the mark moves with the line when the code changes:

function greet(name) {
  console.log(`Hello, ${name}!`); 
}

Written as console.log(...); // [!code highlight].

Highlighting words

A word between slashes is highlighted everywhere in the block:

```js /apiKey/
const apiKey = process.env.API_KEY;
fetch(url, { headers: { "X-Api-Key": apiKey } });
```

const apiKey = process.env.API_KEY;
fetch(url, { headers: { "X-Api-Key": apiKey } });

Or with a comment, // [!code word:pending], on the line before the word:

const status = "pending";

Focus

Dims every other line, to point at one part of a longer example. Mark the lines on the first line with focus={...}, or with a // [!code focus] comment on the line:

```js focus={3}
function setup() {
  loadConfig();
  connectToDatabase();
  startServer();
}
```

function setup() {
  loadConfig();
  connectToDatabase();
  startServer();
}

Hovering the block shows every line.

Diff

Mark added lines with // [!code ++] and removed lines with // [!code --]:

const port = 3000; 
const port = process.env.PORT ?? 3000; 

Errors and warnings

// [!code error] and // [!code warning] mark a line in red or amber:

const safe = validateInput(data);
const unsafe = eval(data); 
const legacy = oldApi(); 

Line numbers

```js lines
function add(a, b) {
  return a + b;
}
```

function add(a, b) {
  return a + b;
}

Wrapping

Long lines scroll sideways. wrap wraps them instead:

```js wrap
const message = "A very long line that would otherwise scroll sideways instead of wrapping onto the next lines.";
```

const message = "A very long line that would otherwise scroll sideways instead of wrapping onto the next lines.";

Collapsible blocks

expandable shows the first lines of a long block, with a button to show the rest:

```python expandable
class Example:
    ...
```

class Example:
    def one(self): pass
    def two(self): pass
    def three(self): pass
    def four(self): pass
    def five(self): pass
    def six(self): pass
    def seven(self): pass
    def eight(self): pass
    def nine(self): pass
    def ten(self): pass
    def eleven(self): pass
    def twelve(self): pass

Copy button

Every block has a button to copy its code, shown on hover. nocopy leaves it out - for output or a diagram nobody needs to copy:

```text nocopy
+-------+     +-------+
| input | --> | model |
+-------+     +-------+
```

Combining options

Options combine in any order:

```python app.py lines {2} wrap
def handler(event):
    process(event)
    return {"status": "ok"}
```

def handler(event):
    process(event)
    return {"status": "ok"}

Related

• CodeGroup - several code blocks, with tabs.
• CodeBlock - a code block from props.
• RequestExample and ResponseExample - code pinned beside the page.