> ## Documentation Index
> Fetch the complete documentation index at: https://omer-914cc1c6.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 代码

> 展示内联代码与代码块

<div id="adding-code-samples">
  ## 添加代码示例
</div>

你可以添加行内代码片段或代码块。代码块支持用于语法高亮、标题、行高亮、图标等的元选项。

<div id="inline-code">
  ### 行内代码
</div>

要将某个`单词`或`短语`标记为代码，请用反引号（\`）将其包裹。

```mdx theme={null}
要将某个 `单词` 或 `短语` 标记为代码，请用反引号（`）将其包裹起来。
```

<div id="code-blocks">
  ### 代码块
</div>

使用[围栏代码块](https://www.markdownguide.org/extended-syntax/#fenced-code-blocks)，将代码用三个反引号包裹起来。代码块可直接复制；如果启用了文档助手，用户还可以让 AI 解释代码。

为语法高亮和启用元选项指定编程语言。在语言名后添加任意元选项，例如标题或图标。

```java HelloWorld.java 行数图标 icon="java" theme={null}
class HelloWorld {
    public static void main(String[] args) {
        System.out.println("你好，世界！");
    }
}
```

````mdx theme={null}
```java HelloWorld.java lines icon="java"
class HelloWorld {
    public static void main(String[] args) {
        System.out.println("你好，世界！");
    }
}
```
````

<div id="code-block-options">
  ## 代码块选项
</div>

你可以为代码块添加元选项，以自定义其外观。

<Note>
  在添加任何其他元选项之前，必须先为代码块指定编程语言。
</Note>

<div id="option-syntax">
  ### 选项语法
</div>

* **字符串和布尔选项**：使用 `""`、`''`，或不加引号包裹。
* **表达式选项**：使用 `{}`、`""`，或 `''` 包裹。

<div id="syntax-highlighting">
  ### 语法高亮
</div>

在代码块的起始反引号后指定编程语言即可启用语法高亮。

我们使用 [Shiki](https://shiki.style/) 进行语法高亮，并支持所有可用语言。请在 Shiki 文档中查看完整的[语言](https://shiki.style/languages)列表。

```java theme={null}
class HelloWorld {
    public static void main(String[] args) {
        System.out.println("你好，世界！");
    }
}
```

````mdx theme={null}
```java
class HelloWorld {
    public static void main(String[] args) {
        System.out.println("你好，世界！");
    }
}
```
````

<div id="title">
  ### 标题
</div>

为代码示例添加标题。可使用 `title="Your title"`，或在单独一行放置字符串。

```javascript 代码块示例 theme={null}
const hello = "world";
```

````mdx theme={null}
```javascript 代码块示例
const hello = "world";
```
````

<div id="icon">
  ### 图标
</div>

使用 `icon` 属性为代码块添加图标。查看 [Icons](/zh/components/icons) 以了解所有可用选项。

```javascript icon="square-js" theme={null}
const hello = "world";
```

````mdx theme={null}
```javascript icon="square-js"
const hello = "world";
```
````

<div id="line-highlighting">
  ### 行高亮
</div>

在代码块中使用 `highlight` 并指定行号或范围，以高亮特定行。

```javascript 行高亮示例 highlight= {1-2,5} theme={null}
const greeting = "你好，世界！";
function sayHello() {
  console.log(greeting);
}
sayHello();
```

````mdx theme={null}
```javascript 行高亮示例 highlight={1-2,5}
const greeting = "你好，世界！";
function sayHello() {
  console.log(greeting);
}
sayHello();
```
````

<div id="line-focusing">
  ### 行聚焦
</div>

在代码块中使用 `focus` 并指定行号或范围，以高亮显示特定行。

```javascript 行聚焦示例 focus= {2,4-5} theme={null}
const greeting = "你好，世界！";
function sayHello() {
  console.log(greeting);
}
sayHello();
```

````mdx theme={null}
```javascript 行高亮示例 focus={2,4-5}
const greeting = "你好，世界！";
function sayHello() {
  console.log(greeting);
}
sayHello();
```
````

<div id="show-line-numbers">
  ### 显示行号
</div>

使用 `lines` 在代码块左侧显示行号。

```javascript 显示行号 示例行 theme={null}
const greeting = "你好，世界！";
function sayHello() {
  console.log(greeting);
}
sayHello();
```

````mdx theme={null}
```javascript 显示行号 示例行
const greeting = "Hello, World!";
function sayHello() {
  console.log(greeting);
}
sayHello();
```
````

<div id="expandable">
  ### 可展开
</div>

使用 `expandable` 让用户展开或收起长代码块。

```python 可展开示例 expandable theme={null}
from datetime import datetime, timedelta
from typing import Dict, List, Optional
from dataclasses import dataclass

@dataclass
class Book:
    title: str
    author: str
    isbn: str
    checked_out: bool = False
    due_date: Optional[datetime] = None

class Library:
    def __init__(self):
        self.books: Dict[str, Book] = {}
        self.checkouts: Dict[str, List[str]] = {}  # 读者 -> ISBN 列表

    def add_book(self, book: Book) -> None:
        if book.isbn in self.books:
            raise ValueError(f"已存在 ISBN 为 {book.isbn} 的书籍")
        self.books[book.isbn] = book

    def checkout_book(self, isbn: str, patron: str, days: int = 14) -> None:
        if patron not in self.checkouts:
            self.checkouts[patron] = []

        book = self.books.get(isbn)
        if not book:
            raise ValueError("未找到该书")

        if book.checked_out:
            raise ValueError("该书已被借出")

        if len(self.checkouts[patron]) >= 3:
            raise ValueError("该读者已达到借阅上限")

        book.checked_out = True
        book.due_date = datetime.now() + timedelta(days=days)
        self.checkouts[patron].append(isbn)

    def return_book(self, isbn: str) -> float:
        book = self.books.get(isbn)
        if not book or not book.checked_out:
            raise ValueError("未找到该书或该书未被借出")

        late_fee = 0.0
        if datetime.now() > book.due_date:
            days_late = (datetime.now() - book.due_date).days
            late_fee = days_late * 0.50

        book.checked_out = False
        book.due_date = None

        # 从读者的借阅列表中移除
        for patron, books in self.checkouts.items():
            if isbn in books:
                books.remove(isbn)
                break

        return late_fee

    def search(self, query: str) -> List[Book]:
        query = query.lower()
        return [
            book for book in self.books.values()
            if query in book.title.lower() or query in book.author.lower()
        ]

def main():
    library = Library()

    # 添加一些书
    books = [
        Book("The Hobbit", "J.R.R. Tolkien", "978-0-261-10295-4"),
        Book("1984", "George Orwell", "978-0-452-28423-4"),
    ]

    for book in books:
        library.add_book(book)

    # 借阅与归还示例
    library.checkout_book("978-0-261-10295-4", "patron123")
    late_fee = library.return_book("978-0-261-10295-4")
    print(f"逾期费用：${late_fee:.2f}")

if __name__ == "__main__":
    main()
```

````mdx theme={null}
```python 可展开示例 expandable
from datetime import datetime, timedelta
from typing import Dict, List, Optional
from dataclasses import dataclass

# …

if __name__ == "__main__":
    main()
```
````

<div id="wrap">
  ### Wrap
</div>

使用 `wrap` 为长文本启用自动换行。这样可避免水平滚动，并使长行更易读。

```javascript 换行 示例 wrap theme={null}
const greeting = "你好，世界！我是一段很长的文本，会在末尾自动换到下一行。";
function sayHello() {
  console.log(greeting);
}
sayHello();
```

````mdx theme={null}
```javascript 自动换行示例 wrap
const greeting = "Hello, World! 我是一段很长的文本，会自动换到下一行。";
function sayHello() {
  console.log(greeting);
}
sayHello();
```
````

<div id="diff">
  ### 差异对比
</div>

在代码块中以可视化方式展示新增或删除的行。新增行以绿色高亮，删除行以红色高亮。

要创建差异对比，请在代码块的行尾添加以下特殊注释：

* `// [!code ++]`: 将该行标记为新增（绿色高亮）。
* `// [!code --]`: 将该行标记为删除（红色高亮）。

对于多行连续的情况，可在冒号后指定行数：

* `// [!code ++:3]`: 将当前行及其后两行标记为新增。
* `// [!code --:5]`: 将当前行及其后四行标记为删除。

注释语法必须与所用编程语言匹配（例如，JavaScript 使用 `//`，Python 使用 `#`）。

```js 差异示例 icon="code" lines theme={null}
const greeting = "你好，世界！"; // [!code ++]
function sayHello() {
  console.log("你好，世界！"); // [!code --]
  console.log(greeting); // [!code ++]
}
sayHello();
```

````text theme={null}
```js Diff 示例 icon="code" lines
const greeting = "你好，世界！"; // [!code ++]
function sayHello() {
  console.log("你好，世界！"); // [!code --]
  console.log(greeting); // [!code ++]
}
sayHello();
```
````