Skip to content

代码块

语法高亮、标题、行标记和包管理器标签页。

AI 生成 · 待审阅更新于 查看 Markdown

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

标题和高亮

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

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

行标记

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

const ok = true;        
const removed = false;  
const added = true;     
const focused = 1;      
const broken = err;     

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

语言别名

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

包管理器标签页

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

<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 组件——参见添加组件。

导航

输入以搜索…

↑↓ 导航↵ 选择Esc 关闭