Code blocks

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!"

// 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 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!')
  }
```

Warning

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.

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

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

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

Run Worker in Playground

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

TypeScript examples

The TypeScriptExample component uses detype ↗ to remove TypeScript-specific syntax from your example and provide a JavaScript tab. This reduces maintenance burden by only having a single example to maintain.

Input

• filename string | { js: string, ts: string } (optional)
  • If a single TypeScript filename is passed, this will be used for JavaScript but with a .js file extension.
    • <TypeScriptExample filename="example.ts">
  • To specify different filenames for the two languages, pass an object with a js and ts filename including extensions.
    • <TypeScriptExample filename={{ js: "foo.js", ts: "bar.ts" }}>
• tabsWrapper boolean (optional)
  • When set to false, this component will not render <Tabs> components.
    • This allows you to include the JS/TS tabs in your own <Tabs> and add <TabItem>s before/after, i.e for Python examples.
• playground boolean (optional)
  • When set to true, a "Open Worker in Playground" link will render on the JavaScript codeblock.

JavaScript

index.js

export default {
  async fetch(req, env, ctx) {
    if (req !== "POST") {
      return new Response("Method Not Allowed", {
        status: 405,
        headers: {
          Allow: "POST",
        },
      });
    }

    await env.KV.put("foo", "bar");

    return new Response();
  },
};

TypeScript

index.ts

interface Environment {
  KV: KVNamespace;
}

export default {
  async fetch(req, env, ctx): Promise<Response> {
    if (req !== "POST") {
        return new Response("Method Not Allowed", {
            status: 405,
            headers: {
                "Allow": "POST"
            }
        });
    }

    await env.KV.put("foo", "bar");

    return new Response();
  }
} satisfies ExportedHandler<Environment>

import { TypeScriptExample } from "~/components";

<TypeScriptExample filename="index.ts">
```ts
interface Environment {
  KV: KVNamespace;
}

export default {
  async fetch(req, env, ctx): Promise<Response> {
    if (req !== "POST") {
        return new Response("Method Not Allowed", {
            status: 405,
            headers: {
                "Allow": "POST"
            }
        });
    }

    await env.KV.put("foo", "bar");

    return new Response();
  }
} satisfies ExportedHandler<Environment>
```
</TypeScriptExample>

Was this helpful?

What did you like?

Accurate

Easy to understand

Solved my problem

Helped me decide to use the product

Other

What went wrong?

Hard to understand

Incorrect information

Missing the information

Other

Thank you for helping improve Cloudflare's documentation!