---
title: 代码块
description: 添加带语法高亮、行号、文件名和行高亮的代码块，并使用 CodeGroup 展示多语言示例。
---

> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.

使用代码块展示命令、配置文件和带语法高亮的代码片段。

## 基本语法高亮

```javascript
const greeting = "Hello, Jamdesk!";
console.log(greeting);
```

## 添加文件名

使用 `title` 属性显示文件路径：

```typescript src/config.ts
export const config = {
  name: "My Docs",
  theme: "jam"
};
```

## 行高亮

使用 `{1,3-5}` 语法突出显示特定行：

```javascript {1,4-6}
// This line is highlighted
const config = {
  apiKey: process.env.API_KEY,
  baseUrl: 'https://api.example.com', // highlighted
  timeout: 5000,                       // highlighted
  retries: 3,                          // highlighted
};
```

## 行号

使用 `showLineNumbers` 添加行号：

```python showLineNumbers
def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n - 1) + fibonacci(n - 2)
```

## 自定义起始行

从指定行开始编号：

```go showLineNumbers startLine=42
func processRequest(ctx context.Context) error {
    // This is line 42
    return nil
}
```

## 组合功能

同时使用多个功能：

```typescript api/client.ts showLineNumbers {3-5}
import axios from 'axios';

const client = axios.create({
  baseURL: process.env.API_URL,
  timeout: 10000,
});

export default client;
```

## 代码组

以多种语言展示相同的代码：

<CodeGroup>
```bash cURL
curl -X POST https://api.example.com/posts \
  -H "Authorization: Bearer $API_KEY"
```

```javascript JavaScript
const response = await fetch('https://api.example.com/posts', {
  method: 'POST',
  headers: { 'Authorization': `Bearer ${API_KEY}` }
});
```

```python Python
import requests
response = requests.post(
    'https://api.example.com/posts',
    headers={'Authorization': f'Bearer {API_KEY}'}
)
```
</CodeGroup>

## 可用主题

在 `docs.json` 中配置语法高亮主题：

```json docs.json
{
  "styling": {
    "codeblocks": {
      "theme": {
        "light": "github-light",
        "dark": "github-dark"
      }
    }
  }
}
```

<Accordion title="查看支持的主题">

热门主题包括：

- **GitHub**：`github-dark`、`github-light`、`github-dark-default`、`github-light-default`
- **深色主题**：`tokyo-night`、`one-dark-pro`、`dracula`、`nord`、`vitesse-dark`
- **浅色主题**：`vitesse-light`、`min-light`
- **Catppuccin**：`catppuccin-mocha`、`catppuccin-latte`

</Accordion>

## CSS 变量主题

如需完全控制语法高亮颜色，请使用 CSS 变量主题：

```json docs.json
{
  "styling": {
    "codeblocks": {
      "theme": "css-variables"
    }
  }
}
```

然后在 `style.css` 中自定义颜色：

```css style.css
:root {
  --jd-token-keyword: #ff7b72;
  --jd-token-string: #a5d6ff;
  --jd-token-comment: #8b949e;
  --jd-token-function: #d2a8ff;
  --jd-token-constant: #79c0ff;
  --jd-token-parameter: #ffa657;
}
```

<Accordion title="查看全部 CSS 变量">

| 变量 | 说明 |
| -------- | ----------- |
| `--jd-color-text` | 默认文本颜色 |
| `--jd-color-background` | 代码块背景 |
| `--jd-token-keyword` | 关键字（if、const、function） |
| `--jd-token-string` | 字符串字面量 |
| `--jd-token-comment` | 注释 |
| `--jd-token-function` | 函数名称 |
| `--jd-token-constant` | 常量 |
| `--jd-token-parameter` | 函数参数 |
| `--jd-token-punctuation` | 括号、逗号 |
| `--jd-token-link` | URL 和链接 |

</Accordion>

## 接下来做什么？

<Columns cols={2}>
  <Card title="SEO 优化" icon="magnifying-glass-chart" href="/cn/content/seo">
    提升内容发现率并优化元数据
  </Card>
  <Card title="Frontmatter" icon="file-lines" href="/cn/content/frontmatter">
    定义标题、描述和 SEO 字段
  </Card>
</Columns>