代码区块
向页面添加代码区块以包含示例代码、配置、代码片段等
您可以使用代码块将代码添加到您的 GitBook 页面中。
当您添加代码块时,您可以选择 设置语法, 显示行号, 显示标题,并且 换行显示。同样也很容易 将代码块内容复制到剪贴板,以便在其他地方使用
代码块可能有用的场景包括:
共享配置
添加代码片段
共享代码文件
展示命令行工具的用法示例
展示如何调用 API 端点
以及更多!
代码块示例
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");greeting = lambda {|name| puts "Hello, #{name}!"}
greeting.("Anna")greeting = fn name -> IO.puts("Hello, #{name}!") end
greeting.("Anna")代码块选项
当您点击代码块旁的 选项菜单 ,或区块本身的 操作菜单
时,您会看到可以设置的多个选项。
设置语法…
您可以将代码块的语法设置为任何受支持的语言。这也将启用该语言的语法高亮。
// 一些代码带行号
这将切换代码的行号显示(开/关)。
当代码表示整个文件的内容时,或当您有很长且包含许多行的代码块时,显示行号很有用。隐藏行号适用于片段、命令行或终端表达式的使用说明以及类似场景。
带标题
这将切换位于区块顶部、代码行上方的标题的显示(开/关)。
标题通常是示例中所示的文件名, 如上例,但您也可以将其用作标题、描述或任何您想要的内容。
换行代码
这将切换代码换行的开/关,使长行代码在页面上一次性全部可见。
当代码较长且您希望避免读者来回滚动以阅读时,换行显示很有用。如果您打开 换行代码 ,您也可能想显示行号——这将使代码更容易阅读并理解新行的起始位置。
可展开
这将切换以完整显示代码(当开关关闭时)或以折叠窗口显示代码(当开关打开时),用户可以展开查看完整代码。
折叠视图默认显示 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 %}最后更新于
这有帮助吗?