# 代码块
你可以使用代码块将代码添加到你的 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 %}
你还可以将代码块与 [标签块](https://gitbook-open-v2-preview.gitbook.workers.dev/url/gitbook.com/docs/documentation/zh/creating-content/blocks/tabs) 结合使用，以多种不同语言提供同一个代码示例：
{% 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" %}
你可以将代码块设为 [占满窗口的整个宽度](https://gitbook-open-v2-preview.gitbook.workers.dev/url/gitbook.com/docs/documentation/zh/creating-content/blocks/..#full-width-blocks) ，方法是点击块旁边的 **选项菜单** 
并选择 **全宽**.
{% endhint %}
### 代码块选项
当你点击 **选项菜单** 代码块旁边的，或 **操作菜单** 
代码块本身中的时，你会看到许多可设置的选项。
#### 设置语法…
你可以将代码块中的语法设置为任何受支持的语言。这也会启用该语言的语法高亮。
{% 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 %}
````