Skip to content
Hexel StudioDocs

Code blocks

Highlighting, titles, highlighted lines, language tabs and diagrams.

On this page

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.

const res = await fetch("https://api.hexelstudio.com/v1/workspaces", {
  headers: { Authorization: `Bearer ${token}`, "X-Organization-Id": orgId },
})
```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.

Exchange the identity token
curl --request POST --url 'https://sts.hexelstudio.com/...'
```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.

const config = {
  issuer: "https://identity.hexelstudio.com/t/hexel",
  clientId: process.env.CLIENT_ID,
  redirectUri: "https://app.example.com/callback",
  scope: "openid profile email",
}
```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.

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

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

Diagrams

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

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