Code

Syntax-highlighted code block — Shiki transformers add filename frames, line highlights, diff, focus, error/warning notation, and word highlights.

View as Markdown

Installation

npx nimbus-docs add code

yarn dlx nimbus-docs add code

pnpm dlx nimbus-docs add code

bunx 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]
}
```

Line numbers

Pass lineNumbers to render a gutter — numbers are CSS counters on Shiki’s per-line spans, so they stay in sync with whatever other transformers run.

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

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

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`
`lineNumbers`	`boolean`