# Code formatting
Use Mintlify-style code fence metadata for titled snippets, line numbers, wrapping, highlighted lines, focused lines, diffs, and expandable examples.
Source: /docs/components/code
Last modified: 2026-06-20
Code fences are part of the docs component system. Use ordinary fenced code first; the docs renderer adds the language label, copy action, title bar, line metadata, wrapping, and expandable state.

## Basic fences

Give every snippet a language. Add `title` or `filename` when the reader should see the file or command context.

```js title="open-offer.js"
await window.Plandalf.openOffer({
  offerId: "offer_123",
  mode: "modal"
});
```

````mdx title="basic-code.mdx"
```js title="open-offer.js"
await window.Plandalf.openOffer({
  offerId: "offer_123",
  mode: "modal"
});
```
````

### Imported Mintlify fence metadata

Mintlify examples often include display metadata such as `theme={null}` after the code fence language. Plandalf ignores that metadata while keeping the useful human label before it.

```mdx Card example theme={null}

### [Card title](/components/columns)


  This copied Mintlify example keeps "Card example" as the code title.


```

````mdx title="mintlify-fence-metadata.mdx"
```mdx Card example theme={null}

### [Card title](/components/columns)


  This copied Mintlify example keeps "Card example" as the code title.


```
````

## Lines, wrapping, and highlights

Use `lines` for numbered examples, `wrap` for long shell commands, and `{}` or `highlight` metadata for important lines. Use `focus` when a snippet needs to dim everything except the line the reader should inspect.

```ts title="checkout-button.ts" lines {2,5} focus="2,5"
const offerId = "offer_123";
const customerId = signedContext.customer.id;

await window.Plandalf.openOffer({
  offerId,
  customerId
});
```

```bash title="install.sh" wrap
npm install @plandalf/browser @plandalf/react --save-exact
```

````mdx title="line-metadata.mdx"
```ts title="checkout-button.ts" lines {2,5} focus="2,5"
const offerId = "offer_123";
const customerId = signedContext.customer.id;

await window.Plandalf.openOffer({
  offerId,
  customerId
});
```

```bash title="install.sh" wrap
npm install @plandalf/browser @plandalf/react --save-exact
```
````

## Diffs

Use `diff` and inline `[!code ++]` / `[!code --]` markers to show exactly what changed without adding a separate explanation block.

```js title="checkout-event.js" diff
plandalf.on("checkout:opened", ({ offer }) => {
  analytics.track("Checkout opened", { offerId: offer.id });
});

plandalf.on("checkout:completed", ({ offer, session }) => { // [!code ++]
  analytics.track("Checkout completed", { offerId: offer.id, sessionId: session.id }); // [!code ++]
}); // [!code ++]
```

````mdx title="diff-code.mdx"
```js title="checkout-event.js" diff
plandalf.on("checkout:opened", ({ offer }) => {
  analytics.track("Checkout opened", { offerId: offer.id });
});

plandalf.on("checkout:completed", ({ offer, session }) => { // [!code ++]
  analytics.track("Checkout completed", { offerId: offer.id, sessionId: session.id }); // [!code ++]
}); // [!code ++]
```
````

## Expandable examples

Use `expandable` for longer setup code when the first screen should stay focused on the action. The collapsed height keeps the page readable while preserving a copyable full snippet.

```html title="checkout-button.html" lines expandable
<script src="https://cdn.plandalf.com/sdk.js" defer></script>
<script>
  window.plandalfReady = window.plandalfReady || [];
  window.plandalfReady.push(function (plandalf) {
    const button = document.querySelector("[data-buy-pro]");
    button.addEventListener("click", async () => {
      const result = await plandalf.present("offer_123");
      if (result.status === "complete") {
        window.location.href = "/thank-you";
      }
    });
  });
</script>
<button data-buy-pro type="button">Buy Pro</button>
```

## Manual CodeBlock

Use `CodeBlock` only when imported MDX cannot express a snippet as a normal fence.


### manual-codeblock.json


```json
{
  "offerId": "offer_123",
  "mode": "modal"
}
```


## Props


### Code fence metadata


- `language` (js, ts, bash, json, html):
    The first word after the fence controls syntax highlighting and the compact language label.


- `title | filename` (string):
    Renders a small title in the code header.


- `Mintlify display labels` (theme={null}, natural-language title):
    Imported fences such as `mdx Card example theme={null}` keep `Card example` as the title and ignore the Mintlify-only theme metadata.


- `lines` (boolean):
    Adds stable line-number spans for longer examples.


- `wrap` (boolean):
    Allows long commands to wrap instead of forcing horizontal scrolling.


- `{1,3-5} | highlight` (line set):
    Highlights specific lines. Ranges can use `-` or `:`.


- `focus` (line set):
    Dims non-focused lines while keeping the full snippet visible.


- `diff` (boolean):
    Enables `[!code ++]` and `[!code --]` markers for added and removed lines.


- `expandable` (boolean):
    Collapses long examples and adds an expand control.


## Related


  - [Code groups](/docs/components/code-groups): Group equivalent snippets behind language tabs.
  - [Examples](/docs/components/examples): Move request and response snippets into the API rail.
  - [API examples](/docs/components/api-fields-examples): Bind examples to endpoint-aware docs pages.