Code

语法高亮代码块 — Shiki 转换器支持文件名框架、行高亮、差异标记、聚焦、错误/警告标注和词语高亮。

安装

npx @cloudflare/nimbus-docs add code

yarn dlx @cloudflare/nimbus-docs add code

pnpm dlx @cloudflare/nimbus-docs add code

bunx @cloudflare/nimbus-docs add code

预览

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}!`;
}
```

示例

文件名

在元信息中传入 title="path/to/file" 可在代码块上方渲染文件框架。

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_");
}
```

行高亮

在元信息中使用 {N} 或 {N-M} 来高亮特定行。

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

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

差异标记

使用 // [!code ++] 和 // [!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 ++]
}
```

聚焦

在重要行上使用 // [!code focus] 来淡化周围代码。

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;
}
```

错误和警告

使用 // [!code error] 或 // [!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]
}
```

行号

传入 lineNumbers 可渲染装订线 — 行号是 Shiki 每行 span 上的 CSS 计数器，因此会与其他转换器保持同步。

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

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

词语高亮

使用 // [!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 参考

组件接受的全部属性，均源自单一声明。

Prop	Type
`code`required	`string`
`lang`required	`string`
`meta`	`string`
`raw`	`boolean`
`lineNumbers`	`boolean`