---
title: Code blocks
description: Highlighting, titles, highlighted lines, language tabs and diagrams.
url: https://hexelstudio.com/docs/authoring/code-blocks
---

## Fenced code

Name the language after the opening fence. Shiki highlights it at build time with the palette Orbit uses for its code editor: GitHub Light in the light theme and GitHub Dark in the dark theme. Every block has a copy button.

```ts
const res = await fetch("https://api.hexelstudio.com/v1/workspaces", {
  headers: { Authorization: `Bearer ${token}`, "X-Organization-Id": orgId },
})
```

````mdx
```ts
const res = await fetch("https://api.hexelstudio.com/v1/workspaces")
```
````

Unknown languages fall back to plain text instead of failing the build.

## Titles

Text after the language becomes the block's title. A Mintlify-style `title="..."` works too.

```bash Exchange the identity token
curl --request POST --url 'https://sts.hexelstudio.com/...'
```

````mdx
```bash Exchange the identity token
curl --request POST --url 'https://sts.hexelstudio.com/...'
```
````

## Highlighted lines

Add line numbers and ranges in braces after the language.

```ts {2,4-5}
const config = {
  issuer: "https://identity.hexelstudio.com/t/hexel",
  clientId: process.env.CLIENT_ID,
  redirectUri: "https://app.example.com/callback",
  scope: "openid profile email",
}
```

````mdx
```ts {2,4-5}
const config = {
  issuer: "https://identity.hexelstudio.com/t/hexel",
  ...
}
```
````

Mintlify options with no meaning here, such as `theme={"dark"}`, `lines` and `wrap`, are ignored rather than shown, so imported pages render cleanly.

## Code groups

`<CodeGroup>` shows several blocks as tabs. Each tab takes the block's title, or else its language.

<CodeGroup>
```bash cURL
curl --request GET \
  --url 'https://identity.hexelstudio.com/t/hexel/.well-known/openid-configuration'
```

```ts TypeScript
const discovery = await fetch(
  "https://identity.hexelstudio.com/t/hexel/.well-known/openid-configuration"
).then((res) => res.json())
```

```python Python
import requests

discovery = requests.get(
    "https://identity.hexelstudio.com/t/hexel/.well-known/openid-configuration"
).json()
```
</CodeGroup>

````mdx
<CodeGroup>
```bash cURL
curl --request GET --url '...'
```

```python Python
discovery = requests.get("...").json()
```
</CodeGroup>
````

<Tip>
  A reader's language choice applies to every code group on the site and is remembered between visits. Pick **Python** here, and the landing page example switches to Python too.
</Tip>

## Diagrams

A `mermaid` fence becomes a diagram. Mermaid loads only on pages that have one.

```mermaid
flowchart LR
  A[MDX file] --> B[Next.js build]
  B --> C[Static pages]
  B --> D[search.json]
  B --> E[llms.txt and .md copies]
```

````mdx
```mermaid
flowchart LR
  A[MDX file] --> B[Next.js build]
  B --> C[Static pages]
```
````