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

// Collapsing
const foo = {
  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!')
  }
```

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 ts-blank-space ↗ 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.

Note

Some TypeScript syntax influences runtime behaviour, and cannot be stripped.

Please refer to the Unsupported Syntax ↗ section of the project's README.

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>