Code formatting

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.

await window.Plandalf.openOffer({
  offerId: "offer_123",
  mode: "modal"
});

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

<Card title="Card title" icon="text-align-start" href="/components/columns">
  This copied Mintlify example keeps "Card example" as the code title.
</Card>

```mdx Card example theme={null}
<Card title="Card title" icon="text-align-start" href="/components/columns">
  This copied Mintlify example keeps "Card example" as the code title.
</Card>
```

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.

const offerId = "offer_123";
const customerId = signedContext.customer.id;

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

npm install @plandalf/browser @plandalf/react --save-exact

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

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 ++]

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

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

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

Props

Code fence metadata

languagejs, ts, bash, json, html

The first word after the fence controls syntax highlighting and the compact language label.

title | filenamestring

Renders a small title in the code header.

Mintlify display labelstheme={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.

linesboolean

Adds stable line-number spans for longer examples.

wrapboolean

Allows long commands to wrap instead of forcing horizontal scrolling.

{1,3-5} | highlightline set

Highlights specific lines. Ranges can use - or :.

focusline set

Dims non-focused lines while keeping the full snippet visible.

diffboolean

Enables [!code ++] and [!code --] markers for added and removed lines.

expandableboolean

Collapses long examples and adds an expand control.

Related