Skip to content
Cloudflare Docs

Code blocks

The Code component is used 23 times on 11 pages.

See all examples of pages that use Code

Used 23 times.

Pages

Partials

Code blocks are powered by Expressive Code ↗, 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.

PowerShell
Write-Output "This one has a title!"
JavaScript
// Collapsing
const foo = {
3 collapsed lines
  1: 1,
  2: 2,
  3: 3,
};
JavaScript
// Line numbers
const foo = "bar";
const bar = "baz";
JavaScript
// 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";
}
JavaScript
function demo() {
  console.log("These are inserted and deleted marker types");
  // The return statement uses the default marker type
  return true;
}
JavaScript
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!')
}
 
```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!')
  }
```

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.

Terminal window
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
```


```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

Live demo

JavaScript
export default {
  fetch() {
    return new Response("Test!");
  },
};
Run Worker in Playground

How to use

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

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 ↗.

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
      }
    }
  }
}
Run in GraphQL API Explorer
 
```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:

```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"}