Skip to content
Cloudflare Docs

Code blocks

Code is used 23 times on 11 pages.

Pages which use Code

Code blocks are powered by Expressive Code ↗, a project by Astro. This is just a small showcase of functionality, it has a lot of options!

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

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

If you add the graphql-api-explorer option to the opening code fence for a graphql code block, it will add a "Run in GraphQL API Explorer" link that will take the user to the GraphQL API explorer ↗.

Live demo

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

How to use

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