---
title: "代码块"
description: "语法高亮、标题、行标记和包管理器标签页。"
---

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

# 代码块

围栏代码块在构建时使用 Shiki 进行语法高亮，配置了亮色/暗色双主题，因此代码块会随站点主题切换——不会向客户端发送高亮器。

<h2 id="titles-and-highlighting">标题和高亮</h2>

在围栏元信息中添加标题和高亮行：

````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)],
});
```
````

<h2 id="notations">行标记</h2>

行内注释标记用于标注差异、高亮、聚焦和错误：

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

这些来自默认的 Shiki 转换器链。如果你通过 `Code` 组件渲染代码，请通过 `nimbus-docs` 导出的 `defaultCodeTransformers` 传入相同的转换器链。

<h2 id="language-aliases">语言别名</h2>

常见的简写围栏会被映射，避免回退为纯文本：`curl` 和 `console` → `bash`，`shellsession` → `shellscript`。通过 Astro 的 `markdown.shikiConfig.langAlias` 扩展此集合。

<h2 id="package-manager-tabs">包管理器标签页</h2>

`<PackageManagers>` 为 npm、pnpm、yarn 和 bun 渲染同一命令。它在默认注册表中，无需导入：

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

- `type="create"` → `npm create …`
- `type="run"` → `npm run …`
- `type="dlx"` → `npx` / `pnpm dlx` / 等

如需为同一示例展示多种语言，请从注册表安装 `code-group` 组件——参见[添加组件](/adding-components)。

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