> ## Documentation Index
> Fetch the complete documentation index at: https://www.usenotra.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Code

> Code blocks with syntax highlighting, a copy button and a theme that fits your site.

Code blocks get syntax highlighting, a copy button and a theme that fits your site, and `CodeGroup` keeps related blocks together.

## Code blocks

Fence code with three backticks and name the language for syntax highlighting:

````mdx theme={"system"}
```typescript
const site = await notra.sites.get("acme");
```
````

<Frame caption="How it looks on your site">
  <img src="https://mintcdn.com/notra/_2RERYWY3HnUeONN/images/sites/components/code-light.webp?fit=max&auto=format&n=_2RERYWY3HnUeONN&q=85&s=245b43c437f02dda1bd1cf55ec04addc" alt="A highlighted code block on a Notra site" className="block dark:hidden" width="1824" height="282" data-path="images/sites/components/code-light.webp" />

  <img src="https://mintcdn.com/notra/_2RERYWY3HnUeONN/images/sites/components/code-dark.webp?fit=max&auto=format&n=_2RERYWY3HnUeONN&q=85&s=64090942e9897552ff26f747fbb0f507" alt="A highlighted code block on a Notra site" className="hidden dark:block" width="1824" height="282" data-path="images/sites/components/code-dark.webp" />
</Frame>

* Highlighting covers every language [Shiki](https://shiki.style/languages) knows, like `bash`, `json`, `tsx`, `python`, `go`, `rust`, `sql` and `yaml`.
* Code blocks in the post get a **copy button** and the language name in the corner when a reader hovers over them.
* Long lines scroll sideways in `.mdx` files and wrap in `.md` files.
* Inline code uses single backticks, like `` `blog.json` ``.

Notra doesn't support titles after the language (` ```js title.js `), line highlighting or line numbers yet, and ignores the text after the language.

## Syntax theme

`styling.codeblocks` in `blog.json` sets the colors:

```json blog.json theme={"system"}
{ "styling": { "codeblocks": "system" } }
```

| Value | Result |
| - | - |
| `"system"` (default) | GitHub's light theme in light mode and its dark theme in dark mode |
| `"dark"` | Dark code blocks in both modes |
| A theme name, like `"vitesse-dark"` | Any [Shiki theme](https://shiki.style/themes), in both modes |
| `{ "light": "github-light", "dark": "vitesse-dark" }` | One theme per mode |

The setting applies to `.mdx` files, while code blocks in `.md` files keep GitHub's light and dark colors and `"dark"` only darkens their background.

## CodeGroup

`CodeGroup` keeps several related code blocks together with even spacing:

````mdx theme={"system"}
<CodeGroup>
```bash
npm install acme
```

```typescript
import { Acme } from "acme";
```
</CodeGroup>
````

The code blocks inside render without their frame and copy button. To let readers pick one of several alternatives, like npm or bun, use [Tabs](/docs/sites/components/tabs) instead.

## Styling

Code blocks in posts carry the class `code-block`, their copy button carries `code-block-copy-button` and groups carry `code-group`.

```css style.css theme={"system"}
.code-block-copy-button { display: none; }
```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.