---
title: "Code blocks"
description: "Syntax highlighting, titles, line notations, and package-manager tabs."
---

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

# Code blocks

Fenced code blocks are highlighted at build time with Shiki, configured for dual light/dark themes so blocks switch with the site theme — no client-side highlighter ships.

## Titles and highlighting

Add a title and highlight lines in the fence meta:

````md
```ts title="astro.config.ts" {2,4-5}
import { defineConfig } from "astro/config";
import nimbus from "@cloudflare/nimbus-docs";

export default defineConfig({
  integrations: [nimbus(config)],
});
```
````

## Notations

Inline comment notations mark diffs, highlights, focus, and errors:

```ts
const ok = true;        // [!code highlight]
const removed = false;  // [!code --]
const added = true;     // [!code ++]
const focused = 1;      // [!code focus]
const broken = err;     // [!code error]
```

These come from the default Shiki transformer chain. If you render code through the `Code` component, pass the same chain via `defaultCodeTransformers` exported from `nimbus-docs`.

## Language aliases

Common shorthand fences are mapped so they don't fall through to plaintext: `curl` and `console` → `bash`, `shellsession` → `shellscript`. Extend the set through Astro's `markdown.shikiConfig.langAlias`.

## Package-manager tabs

`<PackageManagers>` renders one command across npm, pnpm, yarn, and bun. It's in the default registry, so no import is needed:

```mdx
<PackageManagers pkg="@cloudflare/nimbus-docs" type="exec" args="add badge" />
```

- `type="create"` → `npm create …`
- `type="run"` → `npm run …`
- `type="exec"` → the project's installed CLI: `npx @cloudflare/nimbus-docs` / `pnpm nimbus-docs` / `yarn nimbus-docs` / `bunx @cloudflare/nimbus-docs`
- `type="dlx"` → download and run without installing: `npx` / `pnpm dlx` / `yarn dlx` / `bunx`

For multiple languages of the same example, install the `code-group` component from the registry — see [Add components](/styling/add-components).

Source: https://nimbus-docs.com/writing/code-blocks/index.mdx