mirror of
https://github.com/cloudflare/cloudflare-docs.git
synced 2026-01-11 20:06:58 +00:00
[Style Guide] Moved code block guidance from component > format (#27155)
* [Style Guide] Move code block guidance from component > format * Set up redirect and moved remaining content over * Update src/content/docs/style-guide/components/typescript-example.mdx * Apply suggestion from @pedrosousa Co-authored-by: Pedro Sousa <680496+pedrosousa@users.noreply.github.com> * Fix error + Pedro's suggestions --------- Co-authored-by: Pedro Sousa <680496+pedrosousa@users.noreply.github.com>
This commit is contained in:
ToriLindsay
GitHub
parent
140f88a2e1
commit
6a1f35f40e
6 changed files with 230 additions and 260 deletions
|
|
@ -4,6 +4,6 @@ Everyone, including those who are not part of the Cloudflare organization, are e
|
|||
- If you are not a Cloudflare employee, learn how to contribute in the [contribution page](https://developers.cloudflare.com/style-guide/contributions/) of the Cloudflare Style Guide.
|
||||
- If you are a Cloudflare employee, reach out via our Developer Docs space in Google chat.
|
||||
|
||||
Consult the [Cloudflare Style Guide](https://developers.cloudflare.com/style-guide/) on everything from grammar, to formatting, to frontmatter requirements. Browse our [components](/style-guide/components/) to add additional formatting such as [notes](/style-guide/documentation-content-strategy/component-attributes/notes-tips-warnings/) and [code blocks](/style-guide/components/code/).
|
||||
Consult the [Cloudflare Style Guide](https://developers.cloudflare.com/style-guide/) on everything from grammar, to formatting, to frontmatter requirements. Browse our [components](/style-guide/components/) to add additional formatting.
|
||||
|
||||
Thank you for helping us to maintain quality documentation.
|
||||
|
|
@ -1361,6 +1361,7 @@
|
|||
/style-guide/components/asides/ /style-guide/formatting/notes-and-other-notation-types/ 301
|
||||
/style-guide/components/last-reviewed/ /style-guide/frontmatter/custom-properties/#reviewed 301
|
||||
/style-guide/components/mermaid/ /style-guide/documentation-content-strategy/component-attributes/diagrams/#mermaid-diagrams 301
|
||||
/style-guide/components/code/ /style-guide/formatting/code-block-guidelines/ 301
|
||||
|
||||
# support
|
||||
/support/about-cloudflare/getting-started/troubleshooting-faq-for-new-cloudflare-customers/ /fundamentals/reference/troubleshooting/ 301
|
||||
|
|
|
|||
|
|
@ -1,179 +0,0 @@
|
|||
---
|
||||
title: Code blocks
|
||||
styleGuide:
|
||||
component: Code
|
||||
---
|
||||
|
||||
Code blocks are powered by [Expressive Code](https://expressive-code.com/), a project by Astro.
|
||||
This is just a small showcase of the wide functionality of this component.
|
||||
|
||||
Learn more about formatting in the [code block formatting guide](/style-guide/formatting/code-conventions-and-format/).
|
||||
|
||||
````mdx live
|
||||
```powershell title="PowerShell"
|
||||
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
|
||||
Do not use the `$` sign in your code blocks before the command.
|
||||
:::
|
||||
|
||||
## Output
|
||||
|
||||
If you would like to include the output of your code block, create a second code block below and add the `output` property to the opening code fence.
|
||||
|
||||
```sh
|
||||
npx wrangler vectorize create tutorial-index --dimensions=3 --metric=cosine
|
||||
```
|
||||
|
||||
```sh output
|
||||
✅ Successfully created index 'tutorial-index'
|
||||
|
||||
[[vectorize]]
|
||||
binding = "VECTORIZE_INDEX" # available in your Worker on env.VECTORIZE_INDEX
|
||||
index_name = "tutorial-index"
|
||||
```
|
||||
|
||||
````mdx
|
||||
```sh
|
||||
npx wrangler vectorize create tutorial-index --dimensions=3 --metric=cosine
|
||||
```
|
||||
|
||||
```sh output
|
||||
✅ Successfully created index 'tutorial-index'
|
||||
|
||||
[[vectorize]]
|
||||
binding = "VECTORIZE_INDEX" # available in your Worker on env.VECTORIZE_INDEX
|
||||
index_name = "tutorial-index"
|
||||
```
|
||||
````
|
||||
|
||||
## Workers Playground
|
||||
|
||||
If you add the `playground` option to the opening code fence for a Worker example, it will
|
||||
add a "Run Worker in Playground" link that will take the user to the [Worker's playground](/workers/playground/)
|
||||
|
||||
### Live demo
|
||||
|
||||
```js playground
|
||||
export default {
|
||||
fetch() {
|
||||
return new Response("Test!");
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### How to use
|
||||
|
||||
````mdx "playground"
|
||||
```js playground
|
||||
export default {
|
||||
fetch() {
|
||||
return new Response("Test!");
|
||||
},
|
||||
};
|
||||
```
|
||||
````
|
||||
|
||||
## GraphQL API Explorer
|
||||
|
||||
Add `graphql-api-explorer` to the opening code fence to create a `graphql` code block with a **Run in GraphQL API Explorer** button that leads to [GraphQL API Explorer](https://graphql.cloudflare.com/explorer).
|
||||
|
||||
:::note
|
||||
This button only works if the person selecting it is logged in or has an API token saved.
|
||||
:::
|
||||
|
||||
````mdx live
|
||||
```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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
### Variables
|
||||
|
||||
In the GraphQL API Explorer, the **Variables** section is automatically filled based on the names and types of the variables defined in your query:
|
||||
- Variables that include `start` and are of type `Time` are set to six hours before the current time
|
||||
- Variables that include `end` and are of type `Time` are set to the current time
|
||||
- Variables that include `start` and are of type `Date` are set to 24 hours before the current date
|
||||
- Variables that include `end` and are of type `Date` are set to the current date
|
||||
- Variables that include `zoneTag` and are of type `string` are set to "ZONE_ID"
|
||||
- Variables that include `accountTag` and are of type `string` are set to "ACCOUNT_ID"
|
||||
- Variables that include `id` and are of type `string` are set to "REPLACE_WITH_ID"
|
||||
- Variables that include `limit` and are of type `int` are set to 100
|
||||
- Any other variable with a type of `string` is set to "REPLACE_WITH_STRING"
|
||||
|
||||
You can also add custom variables by setting their values as a JSON string in the `graphql-api-explorer` metadata. The custom variables will be merged with the automatically populated variables.
|
||||
|
||||
In the following example, the custom value is `custom-variable`:
|
||||
|
||||
````mdx
|
||||
```graphql graphql-api-explorer='{"uID": "custom-variable"}' title="A GraphQL query"
|
||||
query GraphqlExample($zoneTag: string, $start: Time, $end: Time) {
|
||||
viewer {
|
||||
zones(filter: { zoneTag: $zoneTag }) {
|
||||
...
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
So, the **Variables** would look something like this:
|
||||
|
||||
```
|
||||
{"zoneTag":"ZONE_ID", "start":"2025-09-11T14:00:00Z", "end":"2025-09-11T20:00:00Z", "uId": "custom-variable"}
|
||||
```
|
||||
|
|
@ -88,7 +88,7 @@ An optional filename, ending in `.ts`.
|
|||
|
||||
**type:** `boolean`
|
||||
|
||||
If set to `true`, a [`Run Worker in Playground`](/style-guide/components/code/#playground) button will appear on the JavaScript tab.
|
||||
If set to `true`, a [`Run Worker in Playground`](/style-guide/formatting/code-block-guidelines/#workers-playground) button will appear on the JavaScript tab.
|
||||
|
||||
### `code`
|
||||
|
||||
|
|
|
|||
|
|
@ -3,18 +3,15 @@ pcx_content_type: concept
|
|||
title: Code block guidelines
|
||||
---
|
||||
|
||||
You can create code blocks by:
|
||||
To create a code block:
|
||||
- Use triple-grave characters (` ``` `) as a fence, and enter a [language](#languages) name after the first ` ``` ` fence
|
||||
- Indent lines by four spaces or one tab
|
||||
|
||||
- Using triple-acute characters as a "fence" around the code block. (Recommended)
|
||||
- Indenting lines by four spaces or one tab.
|
||||
[Learn about conventions for code blocks](/style-guide/formatting/code-conventions-and-format/)
|
||||
|
||||
To define the syntax highlighting language used for the code block, enter a language name after the first fence. Refer to the [List of languages used in Cloudflare developer documentation](#list-of-languages-used-in-cloudflare-developer-documentation) for a list of supported languages.
|
||||
[Learn about code block special formatting and functionality](#add-special-formatting)
|
||||
|
||||
Use the `txt` language when there is no appropriate syntax highlighting (for example, a fragment of an Apache configuration file).
|
||||
|
||||
Learn more about what you can do with code blocks in the [code block component guide](/style-guide/components/code/).
|
||||
|
||||
## JSON example
|
||||
Here is an example of a JSON code block:
|
||||
|
||||
````
|
||||
```json
|
||||
|
|
@ -36,80 +33,46 @@ The rendered output looks like this:
|
|||
}
|
||||
```
|
||||
|
||||
## Displaying terminal commands
|
||||
### Add output
|
||||
|
||||
- Use the `sh` language for **one-line commands** executed in the Linux/macOS terminal (each command must be in a single line).
|
||||
To add the output of your code block, create a second code block below the first and add the `output` property to the opening code fence, like this:
|
||||
|
||||
:::note
|
||||
 The **Copy to clipboard** button (top-right corner of the code block) will copy the entire content, not just what the reader can select.
|
||||
:::
|
||||
```sh
|
||||
npx wrangler vectorize create tutorial-index --dimensions=3 --metric=cosine
|
||||
```
|
||||
|
||||
- Use the `bash` language for other **Linux/macOS/generic commands**. For example:
|
||||
```txt output
|
||||
✅ Successfully created index 'tutorial-index'
|
||||
|
||||
- Commands that span multiple lines (usually each line ends with a `\`) and may include one or more lines of JSON content.
|
||||
- Commands for specific shells (for example, a command specifically for the zsh shell, where the prompt is usually `%`).
|
||||
[[vectorize]]
|
||||
binding = "VECTORIZE_INDEX" # available in your Worker on env.VECTORIZE_INDEX
|
||||
index_name = "tutorial-index"
|
||||
```
|
||||
|
||||
- Use the `powershell` language for Windows PowerShell commands.
|
||||
````mdx
|
||||
```sh
|
||||
npx wrangler vectorize create tutorial-index --dimensions=3 --metric=cosine
|
||||
```
|
||||
|
||||
- Use the `txt` language for Windows console commands.
|
||||
```txt output
|
||||
✅ Successfully created index 'tutorial-index'
|
||||
|
||||
## Terminal prompts
|
||||
[[vectorize]]
|
||||
binding = "VECTORIZE_INDEX" # available in your Worker on env.VECTORIZE_INDEX
|
||||
index_name = "tutorial-index"
|
||||
```
|
||||
````
|
||||
|
||||
### For "sh" blocks
|
||||
## Languages
|
||||
|
||||
Use "**`$`** "(dollar sign, space) or "**FOLDER_NAME $** " (folder name, space, dollar sign, space).
|
||||
To define the language of your code block, enter the name of the language after the first ``` fence.
|
||||
|
||||
Examples:
|
||||
If there is no appropriate syntax language, use `txt` (for example, a fragment of an Apache configuration file).
|
||||
|
||||
- **`$`** command-to-run
|
||||
- **\~/my-folder `$`** command-to-run (where `~` means the home folder of the current user).
|
||||
Make sure you enter the language name in lower case, since other capitalizations of these names are not supported. For example, entering `JavaScript` would use the `txt` language.
|
||||
|
||||
### For "bash" blocks
|
||||
|
||||
Blocks containing **Linux/macOS/generic** commands:
|
||||
|
||||
- If a code block contains only one (multi-line) command, do not include a `$` prefix so that the user can run the command immediately after copying and pasting without having to remove the prefix.
|
||||
- If a code block includes several commands or it includes output, consider including a prefix before each command to help differentiate between commands and their output. Use the same prefixes as described for `sh` blocks.
|
||||
- For zsh-specific instructions you can use a `%` command prefix instead of `$`.
|
||||
|
||||
### For "powershell" blocks
|
||||
|
||||
By default, do not use any prompt prefixes for PowerShell commands. If you need to establish context (for example, you must be in a specific folder before running a command), using the following prompt:
|
||||
|
||||
- "**PS FOLDER_NAME>** " (the `>` is part of the prompt, and there is a space after it).
|
||||
|
||||
Examples:
|
||||
|
||||
- **PS C:\\>** command-to-run.exe
|
||||
- **PS C:\Users\JohnDoe>** command-to-run.exe
|
||||
|
||||
### For Windows console ("txt") blocks
|
||||
|
||||
Use "**FOLDER_NAME>**" (folder name, bigger than symbol, no space after).
|
||||
|
||||
Alternatively, do not include any prompt and start the line with the command the user must enter (knowing that it will be harder to understand what must be entered and what is example output).
|
||||
|
||||
Examples:
|
||||
|
||||
- <b>C:\\></b>command-to-run.exe
|
||||
- <b>C:\Program Files></b>command-to-run.exe
|
||||
- <b>C:\Users\JohnDoe></b>command-to-run.exe
|
||||
|
||||
---
|
||||
|
||||
## For JSON code blocks
|
||||
|
||||
Use the `json` language for **JSON code blocks** or **JSON fragments.**
|
||||
|
||||
Multi-line curl commands with a JSON body should use `bash` syntax highlighting, as stated in [Displaying terminal commands](#displaying-terminal-commands).
|
||||
|
||||
:::note
|
||||
JSON fragments may appear with a red background in GitHub because they are not valid JSON. Make it clear in the documentation that it is a fragment and not an entire piece of valid JSON content.
|
||||
:::
|
||||
|
||||
## List of languages used in Cloudflare developer documentation
|
||||
|
||||
- `bash` (alias: `curl`)
|
||||
Here is a list of supported languages:
|
||||
- `bash` (alias: `curl`) [Learn more about terminal commands](#terminal-commands)
|
||||
- `c`
|
||||
- `diff`
|
||||
- `go`
|
||||
|
|
@ -119,20 +82,207 @@ JSON fragments may appear with a red background in GitHub because they are not v
|
|||
- `ini`
|
||||
- `java`
|
||||
- `js` (alias: `javascript`)
|
||||
- `json`
|
||||
- `json` [Learn more about JSON commands](#json)
|
||||
- `kotlin`
|
||||
- `php`
|
||||
- `powershell`
|
||||
- `powershell` [Learn more about terminal commands](#terminal-commands)
|
||||
- `python` (alias: `py`)
|
||||
- `ruby` (alias: `rb`)
|
||||
- `rust` (alias: `rs`)
|
||||
- `sh` (alias: `shell`)
|
||||
- `sh` (alias: `shell`) [Learn more about terminal commands](#terminal-commands)
|
||||
- `sql`
|
||||
- `swift`
|
||||
- `toml`
|
||||
- `ts` (alias: `typescript`)
|
||||
- `txt` (aliases: `text`, `plaintext`)
|
||||
- `txt` (aliases: `text`, `plaintext`, no language name)
|
||||
- `xml`
|
||||
- `yaml` (alias: `yml`)
|
||||
|
||||
Different capitalizations of these languages are also supported (but not recommended). For example, `JavaScript` will use the `javascript` language, and `HTML` will use the `html` language.
|
||||
### Terminal commands
|
||||
|
||||
Use `sh` for one-line commands executed in the Linux/macOS terminal.
|
||||
- Each command must be in a single line
|
||||
- Use "**`$`** "(dollar sign, space) or "**FOLDER_NAME $** " (folder name, space, dollar sign, space)
|
||||
- Examples:
|
||||
- **`$`** command-to-run
|
||||
- **\~/my-folder `$`** command-to-run (where `~` means the home folder of the current user)
|
||||
|
||||
:::note
|
||||
The **Copy to clipboard** button (top-right corner of the code block) will copy the entire content, not just what the reader can select.
|
||||
:::
|
||||
|
||||
Use `bash` for other Linux/macOS/generic commands.
|
||||
- For example:
|
||||
- Commands that span multiple lines (usually each line ends with a `\`) and may include one or more lines of JSON content
|
||||
- Commands for specific shells (for example, a command specifically for the zsh shell, where the prompt is usually `%`)
|
||||
- If a code block contains only one (multi-line) command, do not include a `$` prefix so that the user can run the command immediately after copying and pasting without having to remove the prefix
|
||||
- If a code block includes several commands or it includes output, consider including a prefix before each command to help differentiate between commands and their output
|
||||
- For zsh-specific instructions you can use a `%` command prefix instead of `$`
|
||||
|
||||
Use the `powershell` language for Windows PowerShell commands.
|
||||
- By default, do not use any prompt prefixes for PowerShell commands
|
||||
- If you need to establish context (for example, you must be in a specific folder before running a command), use the following prompt:
|
||||
- "**PS FOLDER_NAME>** " (the `>` is part of the prompt, and there is a space after it)
|
||||
- Examples:
|
||||
- **PS C:\\>** command-to-run.exe
|
||||
- **PS C:\Users\JohnDoe>** command-to-run.exe
|
||||
|
||||
Use the `txt` language for Windows console commands.
|
||||
- Use "**FOLDER_NAME>**" (folder name, greater than symbol, no space after)
|
||||
- Alternatively, do not include any prompt and start the line with the command the user must enter (knowing that it will be harder to understand what must be entered and what is example output)
|
||||
- Examples:
|
||||
- C:\> command-to-run.exe
|
||||
- C:\Program Files> command-to-run.exe
|
||||
- C:\Users\JohnDoe> command-to-run.exe
|
||||
|
||||
### JSON
|
||||
|
||||
Use `json` for JSON code blocks or JSON fragments.
|
||||
|
||||
Multi-line curl commands with a JSON body should use `bash` syntax highlighting instead.
|
||||
|
||||
:::note
|
||||
JSON fragments may appear with a red background in GitHub because they are not valid JSON. Make it clear in the documentation that it is a fragment and not an entire piece of valid JSON content.
|
||||
:::
|
||||
|
||||
## Add special formatting
|
||||
|
||||
You can add special formatting to code blocks, such as collapsed sections, line numbers, and highlighting. Here is a showcase of some of the functionality. You can find more options at [Expressive Code](https://expressive-code.com/), a project by Astro.
|
||||
|
||||
````mdx live
|
||||
```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
|
||||
Do not use the `$` sign in your code blocks before a command.
|
||||
:::
|
||||
|
||||
## Workers Playground
|
||||
|
||||
If you add the `playground` option to the opening code fence for a Worker example, it will add a "Run Worker in Playground" link that will take the user to the [Worker's playground](/workers/playground/).
|
||||
|
||||
### Live demo
|
||||
|
||||
```js playground
|
||||
export default {
|
||||
fetch() {
|
||||
return new Response("Test!");
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### How to use
|
||||
|
||||
````mdx "playground"
|
||||
```js playground
|
||||
export default {
|
||||
fetch() {
|
||||
return new Response("Test!");
|
||||
},
|
||||
};
|
||||
```
|
||||
````
|
||||
|
||||
## GraphQL API Explorer
|
||||
|
||||
Add `graphql-api-explorer` to the opening code fence to create a `graphql` code block with a **Run in GraphQL API Explorer** button that leads to [GraphQL API Explorer](https://graphql.cloudflare.com/explorer).
|
||||
|
||||
:::note
|
||||
This button only works if the person selecting it is logged in or has an API token saved.
|
||||
:::
|
||||
|
||||
````mdx live
|
||||
```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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
### Variables
|
||||
|
||||
In the GraphQL API Explorer, the **Variables** section is automatically filled based on the names and types of the variables defined in your query:
|
||||
- Variables that include `start` and are of type `Time` are set to six hours before the current time
|
||||
- Variables that include `end` and are of type `Time` are set to the current time
|
||||
- Variables that include `start` and are of type `Date` are set to 24 hours before the current date
|
||||
- Variables that include `end` and are of type `Date` are set to the current date
|
||||
- Variables that include `zoneTag` and are of type `string` are set to "ZONE_ID"
|
||||
- Variables that include `accountTag` and are of type `string` are set to "ACCOUNT_ID"
|
||||
- Variables that include `id` and are of type `string` are set to "REPLACE_WITH_ID"
|
||||
- Variables that include `limit` and are of type `int` are set to 100
|
||||
- Any other variable with a type of `string` is set to "REPLACE_WITH_STRING"
|
||||
|
||||
You can also add custom variables by setting their values as a JSON string in the `graphql-api-explorer` metadata. The custom variables will be merged with the automatically populated variables.
|
||||
|
||||
In the following example, the custom value is `custom-variable`:
|
||||
|
||||
````mdx
|
||||
```graphql graphql-api-explorer='{"uID": "custom-variable"}' title="A GraphQL query"
|
||||
query GraphqlExample($zoneTag: string, $start: Time, $end: Time) {
|
||||
viewer {
|
||||
zones(filter: { zoneTag: $zoneTag }) {
|
||||
...
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
So, the **Variables** would look something like this:
|
||||
|
||||
```
|
||||
{"zoneTag":"ZONE_ID", "start":"2025-09-11T14:00:00Z", "end":"2025-09-11T20:00:00Z", "uId": "custom-variable"}
|
||||
```
|
||||
|
|
@ -6,9 +6,7 @@ title: Code conventions and format
|
|||
|
||||
Use the conventions described below throughout Cloudflare product content.
|
||||
|
||||
[Learn about code block formatting guidelines](/style-guide/formatting/code-block-guidelines/).
|
||||
|
||||
[Learn about the code block component](/style-guide/components/code/).
|
||||
[Learn about code block formatting guidelines](/style-guide/formatting/code-block-guidelines/)
|
||||
|
||||
## Angle brackets ( `<` and `>` )
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue