# Code blocks

> For the complete documentation index, see [llms.txt](https://preview.writedocs.io/llms.txt).

Syntax highlighting, titles, icons, line and word highlighting, focus, diffs, line numbers, wrapping and collapsible 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.

> To change the colors, pick other themes in [Code themes](https://preview.writedocs.io/docs/configuration/code-themes/).

| Option | Where | What it does |
| --- | --- | --- |
| [`title="..."`](#title) | First line | A title bar |
| [`icon="..."`](#icon) | First line | An icon in the title bar |
| [`{1,3-5}`](#highlighting-lines) | First line | Highlights lines |
| [`[!code highlight]`](#highlighting-lines) | Comment | Highlights that line |
| [`/word/`](#highlighting-words) | First line | Highlights a word everywhere in the block |
| [`[!code word:...]`](#highlighting-words) | Comment | Highlights a word |
| [`focus={...}`, `[!code focus]`](#focus) | Either | Dims the other lines |
| [`[!code ++]`, `[!code --]`](#diff) | Comment | Added and removed lines |
| [`[!code error]`, `[!code warning]`](#errors-and-warnings) | Comment | Marks a line |
| [`lines`](#line-numbers) | First line | Line numbers |
| [`wrap`](#wrapping) | First line | Wraps long lines |
| [`expandable`](#collapsible-blocks) | First line | Collapses a long block |
| [`nocopy`](#copy-button) | First line | No copy button |

## 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](https://preview.writedocs.io/docs/configuration/code-themes/#highlighting-a-language-as-another).

A ` ```mermaid ` block is drawn as a [diagram](https://preview.writedocs.io/docs/content/diagrams/).

## Title

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

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

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

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

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

In a [CodeGroup](https://preview.writedocs.io/docs/content/components/code-group/), the title is the tab's name.

## Icon

`icon` shows an icon before the title - any [icon](https://preview.writedocs.io/docs/content/components/icon/#icons):

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

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

## Highlighting lines

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

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

```js {1,3-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:

```js
function greet(name) {
  console.log(`Hello, ${name}!`); // [!code highlight]
}
```

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

## Highlighting words

A word between slashes is highlighted everywhere in the block:

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

```js /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:

```js
// [!code word:pending]
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:

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

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

Hovering the block shows every line.

## Diff

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

```js
const port = 3000; // [!code --]
const port = process.env.PORT ?? 3000; // [!code ++]
```

## Errors and warnings

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

```js
const safe = validateInput(data);
const unsafe = eval(data); // [!code error]
const legacy = oldApi(); // [!code warning]
```

## Line numbers

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

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

## Wrapping

Long lines scroll sideways. `wrap` wraps them instead:

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

```js wrap
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:

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

```python expandable
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:

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

## Combining options

Options combine in any order:

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

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

## Related

- [CodeGroup](https://preview.writedocs.io/docs/content/components/code-group/) - several code blocks, with tabs.
- [CodeBlock](https://preview.writedocs.io/docs/content/components/code-block/) - a code block from props.
- [RequestExample and ResponseExample](https://preview.writedocs.io/docs/content/components/request-response-example/) - code pinned beside the page.