Code | Nimbus

Installation

Included in the starter. Every new site has it in src/components/ui/code/. Import it where you need it, or register it in src/components.ts to use it on every page. If your site predates it, install it:

npx @cloudflare/nimbus-docs add code

yarn nimbus-docs add code

pnpm nimbus-docs add code

bunx @cloudflare/nimbus-docs add code

Preview

src/lib/hello.tsts

export function hello(name: string) {
  return `Hello, ${name}!`;
}

```ts title="src/lib/hello.ts"
export function hello(name: string) {
  return `Hello, ${name}!`;
}
```

Examples

Filename

Pass title="path/to/file" in the meta to render a file-frame above the block.

src/lib/auth.tsts

export function validateToken(token: string) {
  return token.length > 0 && token.startsWith("sk_");
}

```ts title="src/lib/auth.ts"
export function validateToken(token: string) {
  return token.length > 0 && token.startsWith("sk_");
}
```

Line highlight

Use {N} or {N-M} in the meta to highlight specific lines.

export function Button({ children }) {
  return (
    <button className="btn">
      {children}
    </button>
  );
}

```tsx {3-5}
export function Button({ children }) {
  return (
    <button className="btn">
      {children}
    </button>
  );
}
```

Diff

Mark added / removed lines with // [!code ++] and // [!code --].

function sum(a: number, b: number) {
  return a - b; 
  return a + b; 
}

```ts
function sum(a: number, b: number) {
  return a - b; // [!code --]
  return a + b; // [!code ++]
}
```

Focus

Dim the surrounding code with // [!code focus] on the line(s) that matter.

function main() {
  const config = loadConfig(); 
  const db = connect(config);
  return db;
}

```ts
function main() {
  const config = loadConfig(); // [!code focus]
  const db = connect(config);
  return db;
}
```

Error and warning

Annotate problem lines with // [!code error] or // [!code warning].

function divide(a: number, b: number) {
  if (b === 0) throw new Error("divide by zero"); 
  return a / b;
  return null; 
}

```ts
function divide(a: number, b: number) {
  if (b === 0) throw new Error("divide by zero"); // [!code warning]
  return a / b;
  return null; // [!code error]
}
```

Word highlight

Highlight a specific token everywhere it appears with // [!code word:term].

async function load(id: string) {
  const res = await fetch(`/api/${id}`);
  return await res.json();
}

```ts
// [!code word:async]
async function load(id: string) {
  const res = await fetch(`/api/${id}`);
  return await res.json();
}
```

API reference

Every prop the component accepts, sourced from a single declaration.

Prop	Type
`code`required	`string`
`lang`required	`string`
`meta`	`string`