# 代码块
你可以使用代码块在你的 GitBook 页面中添加代码。
当你添加代码块时，你可以选择 [设置语法](#set-syntax...), [显示行号](#with-line-numbers), [显示标题](#with-caption)，以及 [自动换行](#wrap-code)。你还可以轻松地 [将代码块中的内容复制到剪贴板](#copying-the-code)，这样你就可以在其他地方使用它
代码块可能适用于：
* 共享配置
* 添加代码片段
* 共享代码文件
* 展示命令行工具的使用示例
* 展示如何调用 API 端点
* 还有更多用途！
### 代码块示例
{% 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/creating-content/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" %}
```
// Some code
```
{% 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: 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:
```
GET https://gitbook.com/docs/documentation/zh/creating-content/blocks/code-block.md?ask=
```
The question should be specific, self-contained, and written in natural language.
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.