Code blocks

Every fenced (```) code block gets dual light/dark syntax highlighting automatically via Shiki — 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.

Title

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

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:

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

npm install my-package

Inside a CodeGroup, the title is also the tab’s label.

Add icon="..." to show an icon before the title — any icon string, see Icons:

npm run build

Line highlighting — {1,3-5} meta

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

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.

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

Word highlighting — /word/ meta

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

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

const status = "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:

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

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

Diff

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

Error / warning

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

Wrap

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

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

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

Line numbers

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:

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):

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

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

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

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