跳转到内容
搜索文档

代码块指南

最后更新 查看 MarkdownAgent 设置

要创建代码块:

  • 使用三个反引号(```)作为围栏,并在第一个 ``` 围栏后输入语言名称
  • 缩进 4 个空格或 1 个制表符(tab)

了解代码块规范

了解代码块的特殊格式和功能

这是一个 JSON 代码块的示例:

```json
{
	"firstName": "John",
	"lastName": "Smith",
	"age": 25
}
```

渲染的输出如下所示:

{
	"firstName": "John",
	"lastName": "Smith",
	"age": 25
}

添加输出

要添加代码块的输出,请在第一个代码块下方创建第二个代码块,并将 output 属性添加到开始代码围栏中,如下所示:

npx wrangler vectorize create tutorial-index --dimensions=3 --metric=cosine
✅ Successfully created index 'tutorial-index'

[[vectorize]]
binding = "VECTORIZE_INDEX" # available in your Worker on env.VECTORIZE_INDEX
index_name = "tutorial-index"
```sh
npx wrangler vectorize create tutorial-index --dimensions=3 --metric=cosine
```

```txt output
✅ Successfully created index 'tutorial-index'

[[vectorize]]
binding = "VECTORIZE_INDEX" # available in your Worker on env.VECTORIZE_INDEX
index_name = "tutorial-index"
```

语言

要定义代码块的语言,请在第一个 ``` 围栏后输入语言名称。

语言名称必须小写。例如,使用 javascript,而不是 JavaScript

当没有合适的语法语言时,使用 txt(别名:textplaintext)。

终端命令

  • 对于在 Linux/macOS 终端中执行的命令,使用 shbash 语言,包括:

    • 单行命令
    • 跨多行的命令(通常每行以 \ 结尾)
    • 针对特定 shell 的命令(例如,专门针对 zsh shell 的命令)
  • 对于 Windows PowerShell 命令,使用 powershell 语言。渲染时,这些代码块将具有 PowerShell 标题。

  • 对于 Windows 控制台命令,使用 txt 语言。

每个代码块右上角提供的复制到剪贴板(Copy to clipboard)按钮将复制该代码块的全部内容,包括代码块中包含的任何命令输出。

请勿在命令前包含前缀($%PS>C:\> 或类似前缀),以便用户在复制和粘贴后可以立即运行命令,而无需移除前缀。同样,除非是解释中必不可少的部分,否则请勿写入执行该命令的文件夹。

JSON

json 用于 JSON 代码块或 JSON 片段。

终端命令所述,带有 JSON 体的多行 curl 命令应使用 shbash 语法高亮。

:::note JSON 片段在 GitHub 中可能会显示为红色背景,因为它们不是有效的 JSON。请在文档中明确指出这是片段,而不是整段有效的 JSON 内容。 :::

添加特殊格式

您可以为代码块添加特殊格式,例如折叠区域、行号和高亮。以下是部分功能的展示。您可以在 Expressive Code(Astro 的一个项目)中找到更多选项。

```powershell title="Write string example"
Write-Output "This one has a title"
```

```js collapse={3-5}
// Collapsing
const foo = {
	1: 1,
	2: 2,
	3: 3,
};
```

```js showLineNumbers
// Line numbers
const foo = "bar";
const bar = "baz";
```

```js wrap
// Example with wrap
function getLongString() {
	return "This is a very long string that will most probably not fit into the available space unless the container is extremely wide";
}
```

```js "return true;" ins="inserted" del="deleted"
function demo() {
	console.log("These are inserted and deleted marker types");
	// The return statement uses the default marker type
	return true;
}
```

```diff lang="js"
  function thisIsJavaScript() {
    // This entire block gets highlighted as JavaScript,
    // and we can still add diff markers to it!
-   console.log('Old code to be removed')
+   console.log('New and shiny code!')
  }
```

:::caution 不要在代码块中的命令前使用 $ 符号。 :::

Workers Playground

如果您在 Worker 示例的开始代码围栏中添加 playground 选项,它将添加一个 "Run Worker in Playground"(在 Playground 中运行 Worker)链接,该链接将引导用户访问 Worker's playground

实时演示

export default {
	fetch() {
		return new Response("Test!");
	},
};

如何使用

```js playground
export default {
	fetch() {
		return new Response("Test!");
	},
};
```

GraphQL API Explorer

在开始代码围栏中添加 graphql-api-explorer,以创建一个带有 Run in GraphQL API Explorer 按钮的 graphql 代码块,该按钮可引导至 GraphQL API Explorer

:::note 此按钮仅在选择它的用户已登录或已保存 API 令牌时有效。 :::

```graphql graphql-api-explorer title="A GraphQL query"
query ASingleDatasetExample($zoneTag: string, $start: Time, $end: Time) {
	viewer {
		zones(filter: { zoneTag: $zoneTag }) {
			firewallEventsAdaptive(
				filter: { datetime_gt: $start, datetime_lt: $end }
				limit: 2
				orderBy: [datetime_DESC]
			) {
				action
				datetime
				host: clientRequestHTTPHost
			}
		}
	}
}
```

变量

在 GraphQL API Explorer 中,Variables(变量)部分是根据您的查询中定义的变量名称和类型自动填充的:

  • 包含 start 且类型为 Time 的变量将设置为当前时间的前六个小时
  • 包含 end 且类型为 Time 的变量将设置为当前时间
  • 包含 start 且类型为 Date 的变量将设置为当前日期前 24 小时
  • 包含 end 且类型为 Date 的变量将设置为当前日期
  • 包含 zoneTag 且类型为 string 的变量将设置为 "ZONE_ID"
  • 包含 accountTag 且类型为 string 的变量将设置为 "ACCOUNT_ID"
  • 包含 id 且类型为 string 的变量将设置为 "REPLACE_WITH_ID"
  • 包含 limit 且类型为 int 的变量将设置为 100
  • 任何其他类型为 string 的变量都将设置为 "REPLACE_WITH_STRING"

您还可以通过在 graphql-api-explorer 元数据中将自定义变量的值设置为 JSON 字符串来添加它们。自定义变量将与自动填充的变量合并。

在以下示例中,自定义值为 custom-variable

```graphql graphql-api-explorer='{"uID": "custom-variable"}' title="A GraphQL query"
query GraphqlExample($zoneTag: string, $start: Time, $end: Time) {
 viewer {
   zones(filter: { zoneTag: $zoneTag }) {
     ...
   }
 }
}
```

因此,Variables(变量)看起来会像这样:

{"zoneTag":"ZONE_ID", "start":"2025-09-11T14:00:00Z", "end":"2025-09-11T20:00:00Z", "uId":"custom-variable"}

这篇文档对您有帮助吗?