Code

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:

```typescript
const site = await notra.sites.get("acme");
```

A highlighted code block on a Notra site — How it looks on your site

Highlighting covers every language Shiki 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:

blog.json

{ "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, 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:

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

Styling

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

style.css

.code-block-copy-button { display: none; }

Get started

Domains

Write content

Components

Customize

Publish

Reference

Code blocks

Syntax theme

CodeGroup

Styling

​Code blocks

​Syntax theme

​CodeGroup

​Styling

Code blocks

Syntax theme

CodeGroup

Styling