跳到正文

代码块

构建时高亮、标题、行标记,以及包管理器标签页。

围栏代码块在构建时由 Shiki 高亮,并配置为明暗双主题,使代码块跟随站点主题切换——不会向客户端发送任何高亮器。

标题与高亮

在围栏的 meta 中添加标题和高亮行:

```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="exec" args="add badge" />
  • type="create" → npm create …
  • type="run" → npm run …
  • type="exec" → 项目已安装的 CLI:npx @cloudflare/nimbus-docs / pnpm nimbus-docs / yarn nimbus-docs / bunx @cloudflare/nimbus-docs
  • type="dlx" → 不安装直接下载并运行:npx / pnpm dlx / yarn dlx / bunx

同一个示例需要多种语言时,从注册表安装 code-group 组件——见添加组件。

输入以搜索…

↑↓ 导航↵ 选择Esc 关闭