> For the complete documentation index, see [llms.txt](https://gitbook.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://gitbook.com/docs/documentation/zh/chuang-jian-nei-rong/blocks/code-block.md).
# 代码块
你可以使用代码块在你的 GitBook 页面中添加代码。
当你添加代码块时，你可以选择 [设置语法](#set-syntax...), [显示行号](#with-line-numbers), [显示说明](#with-caption)，以及 [自动换行](#wrap-code)。此外，你还可以轻松地 [将代码块内容复制到剪贴板](#copying-the-code)，这样你就可以在其他地方使用它
代码块可能适用于：
* 共享配置
* 添加代码片段
* 共享代码文件
* 展示命令行工具的使用示例
* 展示如何调用 API 端点
* 还有更多用途！
### 添加代码块
1. 要添加代码块，请将光标放在空行上并输入 `/`.
2. 在快速插入菜单中，选择 **代码块**.
3. GitBook 会插入该块并将光标放在其中，供你粘贴或输入代码。
### 代码块示例
{% code title="index.js" overflow="wrap" lineNumbers="true" %}
```javascript
import * as React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(, window.document.getElementById('root'));
```
{% endcode %}
你还可以将代码块与一个 [选项卡块](/docs/documentation/zh/chuang-jian-nei-rong/blocks/tabs.md) 结合起来，在多种不同语言中提供相同的代码示例：
{% tabs %}
{% tab title="JavaScript" %}
```javascript
let greeting = function (name) {
console.log(`Hello, ${name}!`);
};
greeting("Anna");
```
{% endtab %}
{% tab title="Ruby" %}
```ruby
greeting = lambda {|name| puts "Hello, #{name}!"}
greeting.("Anna")
```
{% endtab %}
{% tab title="Elixir" %}
```elixir
greeting = fn name -> IO.puts("Hello, #{name}!") end
greeting.("Anna")
```
{% endtab %}
{% endtabs %}
### 代码块选项
当你点击 **选项菜单** 代码块旁边的 **操作菜单** 代码块内部时，你会看到一些可设置的选项。
#### 设置语法…
你可以将代码块的语法设置为任何受支持的语言。这也会启用该语言的语法高亮。
{% hint style="info" %}
我们使用 [Prism](https://github.com/PrismJS/prism) 用于语法高亮。你可以使用 [Test Drive Prism](https://prismjs.com/test.html#language=markup) 来查看 Prism 支持哪些语言。如果你发现 GitBook 和 Prism 之间存在不匹配的情况，可能是我们落后了一两个版本。我们很快就会跟上！
{% endhint %}
{% code title="filename.txt" %}
```
// 一些代码
```
{% endcode %}
#### 带行号
这将切换代码行号的显示与隐藏。
当代码表示整个文件的内容时，或当你有带有大量行的长代码块时，显示行号会很有用。对于代码片段、命令行使用说明或终端表达式以及类似场景，隐藏行号会很有用。
#### 带说明
这将切换在代码块顶部、代码行之上的说明显示。
说明通常是文件名，如 [上面的示例](#example-of-a-code-block)所示，但你也可以将其用作标题、描述，或任何你喜欢的内容。
#### 代码自动换行
这将切换代码换行的开启与关闭，因此较长的代码行会自动换行，以便一次在页面上全部可见。
当你的代码很长并且想避免查看者来回滚动阅读时，换行会很有用。如果你将 **代码自动换行** 开启，你也可能希望显示行号——这会让代码更容易阅读，也更容易理解新行从哪里开始。
#### 可展开
这将切换将代码完整显示（关闭时）或以用户可展开的折叠窗口显示代码（开启时）。
折叠视图默认显示 10 行代码，并带有一个按钮，可展开显示完整代码块。如果代码少于 10 行，则会显示所有内容。
### 代码块操作
除了上述选项外，你还可以更改代码块显示的语言，并立即复制代码。
#### 复制代码
将鼠标悬停在代码块上，会出现多个图标。点击中间的图标即可将代码块内容复制到剪贴板。
### Markdown 中的表示
````markdown
{% code title="index.js" overflow="wrap" lineNumbers="true" %}
```javascript
import * as React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(, window.document.getElementById('root'));
```
{% endcode %}
````
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://gitbook.com/docs/documentation/zh/chuang-jian-nei-rong/blocks/code-block.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.