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!");
  },
};
```