Skip to content
Cloudflare Docs

Code blocks

Code is used 23 times on 11 pages.

Pages which 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 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,
};
// Line numbers
const foo = "bar";
const bar = "baz";
// 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 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

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