代码区块

向页面添加代码区块以包含示例代码、配置、代码片段等

您可以使用代码块将代码添加到您的 GitBook 页面。

当您添加代码块时，您可以选择 设置语法, 显示行号, 显示标题，和 换行显示代码行。同样也很容易 将代码块的内容复制到剪贴板，以便您在其他地方使用

代码块可能有用的场景：

• 共享配置

• 添加代码片段

• 共享代码文件

• 显示命令行工具的使用示例

• 展示如何调用 API 端点

• 以及更多！

代码块示例

index.js

‌import * as React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, window.document.getElementById('root'));

您还可以将代码块与 选项卡块 结合使用，以在多种不同语言中提供相同的代码示例：

JavaScript

let greeting = function (name) {
  console.log(`Hello, ${name}!`);
};
greeting("Anna");

Ruby

Elixir

您可以使代码块 跨越窗口的全宽 通过点击块旁的 选项菜单 并选择 全宽.

代码块选项

当您点击 选项菜单 代码块旁边的，或块内的 操作菜单 时，您会看到可以设置的多个选项。

设置语法…

您可以将代码块的语法设置为任何受支持的语言。这也将启用该语言的语法高亮。

我们使用 Prism 进行语法高亮。你可以使用 Test Drive Prism 来检查 Prism 支持哪些语言。如果您发现 GitBook 与 Prism 之间存在不匹配，可能是因为我们落后了一个或两个版本。我们会尽快跟上！

filename.txt

// 一些代码

带行号

这将切换代码的行号显示与否。

显示行号在代码代表整个文件内容时很有用，或当您有很长的多行代码块时。隐藏行号在代码片段、命令行或终端表达式的使用说明和类似场景中更为实用。

带标题

这将切换位于代码块顶部（在代码行上方）的标题的显示与否。

标题通常是示例中所示的文件名， 如我们上面的示例，但您也可以将其用作标题、描述或任何您想要的内容。

换行显示代码

这将切换代码换行的开关，使得长行代码可以换行并一次性在页面上全部可见。

当您的代码很长且希望避免查看者来回滚动阅读时，换行显示非常有用。如果您开启 换行显示代码 ，您可能还想显示行号 —— 这将使代码更易阅读并更容易理解新行的起始位置。

可展开

这将切换显示完整代码（当开关关闭时）或显示一个折叠的代码窗口，用户可以展开（当开关打开时）。

折叠视图默认显示 10 行代码，并带有一个按钮以展开显示完整代码块。如果代码少于 10 行，则会显示所有内容。

代码块操作

除了上述选项，您还可以更改代码块显示的语言，并即时复制您的代码。

复制代码

将鼠标悬停在代码块上会出现一些图标。点击中间的图标即可将代码块的内容复制到剪贴板。

在 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(<App />, window.document.getElementById('root'));
```

{% endcode %}