代码区块

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

您可以使用代码块将代码添加到您的 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'));

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

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

您可以让代码块 跨越窗口的全宽显示 通过点击 选项菜单 The Options menu icon in GitBook 在区块旁并选择 全宽.

代码块选项

当您点击代码块旁的 选项菜单 The Options menu icon in GitBook ,或区块本身的 操作菜单 The Actions menu icon in GitBook 时,您会看到可以设置的多个选项。

设置语法…

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

我们使用 Prism 进行语法高亮。您可以使用 试用 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 %}

最后更新于

这有帮助吗?