Code blocks

Code is highlighted at build time with Shiki and ships as static HTML, themed for light and dark at once. There is no highlighter running in the browser and no flash of unstyled code.

The basics

Fence your code and name the language:

```ts
export function greet(name: string): string {
  return `Hello, ${name}`;
}
```

renders as:

export function greet(name: string): string {
  return `Hello, ${name}`;
}

Always tag the language. Untagged blocks render as plain text and read worse in both themes.

Titles

Add a title to label the block with its file name:

site:
  name: My Project

Line emphasis

Highlight the lines the prose is talking about with a brace range in the fence meta:

const pets = await store.list();
const rex = pets.find((p) => p.name === "Rex");
if (!rex) {
  throw new Error("Rex is missing");
}
console.log(rex.species);

The meta accepts single lines and ranges, combined freely: {1,3-5}.

Several languages, one example

When the same request exists in more than one language, wrap the blocks in a <CodeGroup> and readers pick their tab:

curl https://api.example.com/v1/pets

const pets = await fetch("https://api.example.com/v1/pets").then((r) => r.json());

One fence that is not code

A fence with the mermaid language renders a diagram instead of highlighted code: same syntax, different output.