# Code blocks

Every fenced (` ``` `) code block gets dual light/dark syntax highlighting automatically via [Shiki](https://shiki.style) — no configuration needed, and it switches with the site's own light/dark toggle. On top of that, each block's meta string (the part after the language) or inline `// [!code ...]` comments turn on the features below.

<Callout type="tip">
  See [Styles](/docs/configuration/styles/#stylescodeblocks) for customizing which Shiki theme pair is used.
</Callout>

## Title

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

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

The title can also go straight after the language, with no `title=` — the form Mintlify uses. Every word up to the first option becomes the title:

````mdx
```bash Install with npm
npm install my-package
```
````

```bash Install with npm
npm install my-package
```

Inside a [CodeGroup](/docs/content/components/code-group/), the title is also the tab's label.

Add `icon="..."` to show an icon before the title — any icon string, see [Icons](/docs/content/components/icon/#icons):

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

## Line highlighting — `{1,3-5}` meta

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

## Line highlighting — `[!code highlight]`

Useful when the line to highlight might shift as the snippet changes — the annotation travels with the line instead of a fixed line number.

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

## Word highlighting — `/word/` meta

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

## Word highlighting — `[!code word:...]`

```js
const status = "pending"; // [!code word:pending]
```

## Focus

Dims every other line, useful for walking through one part of a longer snippet. Mark lines in the meta string with `focus={...}`, or in the code with a `[!code focus]` comment:

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

`highlight={1,3-5}` is also accepted as another spelling of the `{1,3-5}` line-highlight meta above.

```js
function setup() {
  loadConfig();
  connectToDatabase(); // [!code focus]
  startServer();
}
```

## Diff

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

## Error / warning

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

## Wrap

By default long lines scroll horizontally. The `wrap` meta flag wraps them instead:

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

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

## Line numbers

```js lines
function add(a, b) {
  return a + b;
}
console.log(add(2, 3));
```

## Expandable

Collapses to a fixed height with a "Show more" toggle — useful for long reference snippets you don't want dominating the page by default:

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

## Copy button

Every fenced block gets a copy-to-clipboard button automatically on hover — no opt-in needed. Add `nocopy` to leave it off, for content where copying makes no sense (an ASCII diagram, sample output):

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

## CodeBlock component

`<CodeBlock>` renders a code block from props instead of a fence - useful when the code comes from a variable, or a component builds it up. It supports the same features:

```mdx
<CodeBlock language="javascript" filename="example.js" lines highlight="[1]">
{`const product = "acme";
console.log(product);`}
</CodeBlock>
```

<Parameter name="language" type="string" default='"text"' />

<Parameter name="filename" type="string">
  Shown in the title bar.
</Parameter>

<Parameter name="icon" type="string">
  Shown before the filename. Any icon string, see [Icons](/docs/content/components/icon/#icons).
</Parameter>

<Parameter name="lines" type="boolean" />

<Parameter name="wrap" type="boolean" />

<Parameter name="nocopy" type="boolean" />

<Parameter name="expandable" type="boolean" />

<Parameter name="highlight" type="string">
  Lines to highlight, as a list - `"[1,3,4]"` - or ranges - `"1,3-5"`.
</Parameter>

<Parameter name="focus" type="string">
  Lines to focus, in the same format as `highlight`.
</Parameter>

## Combining features

Meta-string flags combine freely, and comment-based annotations adapt to the language's own comment syntax (`#` for Python/bash, `//` for JS/etc.):

```python {2} title="app.py"
def handler(event):
    process(event)  # [!code highlight]
    return {"status": "ok"}
```