Code

Inline code#

Use single backticks for short identifiers and commands:

Use `docs.json` for site configuration.

Use docs.json for site configuration.

Fenced code blocks#

Use triple backticks and a language tag for syntax highlighting. Every block gets a copy button automatically.

```javascript
function hello(name) {
  console.log('Hello', name);
}
```

function hello(name) {
  console.log('Hello', name);
}

Common language tags: bash, json, javascript, typescript, tsx, python, yaml, md, mdx, diff, text. Any Shiki language works; unknown tags render as plain text.

Titles#

Add title="..." after the language tag to show a filename bar above the block. A bare word works as shorthand.

```ts title="src/app.ts"
export const app = createApp();
```

export const app = createApp();

Line highlighting#

List line numbers or ranges in braces to emphasize them:

```ts {2,4-5}
const a = 1;
const b = 2;
const c = 3;
const d = 4;
const e = 5;
```

const a = 1;
const b = 2;
const c = 3;
const d = 4;
const e = 5;

You can also mark lines inline with a [!code highlight] comment, which is removed from the output. Append :N to cover the next N lines.

```ts
const config = {
  name: 'Acme Docs', 
  theme: 'dark',
};
```

const config = {
  name: 'Acme Docs', 
  theme: 'dark',
};

Line numbers#

Add showLineNumbers to number the lines, or showLineNumbers=N to start at line N. Numbers are decorative: they are excluded from copying and search.

```ts showLineNumbers=10
function add(a: number, b: number) {
  return a + b;
}
```

function add(a: number, b: number) {
  return a + b;
}

To number every block by default, set styling.codeBlocks.lineNumbers in docs.json and use hideLineNumbers on blocks that should opt out.

Diffs#

Use the diff language for a unified diff, where lines starting with + and - are colored:

```diff
 const config = {
-  name: 'Old name',
+  name: 'Acme Docs',
 };
```

 const config = {
-  name: 'Old name',
+  name: 'Acme Docs',
 };

To keep full syntax highlighting, annotate lines in any language with [!code ++] and [!code --] comments instead. Removed lines are skipped by the copy button so readers get the finished code.

```ts
const config = {
  name: 'Old name', 
  name: 'Acme Docs', 
};
```

const config = {
  name: 'Old name', 
  name: 'Acme Docs', 
};

How highlighting works#

• Shiki tokenizes fenced blocks at build time, so no highlighting runs in the browser
• both light and dark colors are embedded once and switched with CSS; choose the theme pair with styling.codeBlocks.theme
• fenced <pre> elements are rendered by Shiso's CodeBlock component, which adds the title bar, line numbers, and copy control

Code groups#

Use CodeGroup when readers should switch between related snippets (for example package managers or languages):

<CodeGroup>
  ```bash npm
  npm install
  ```

  ```bash pnpm
  pnpm install
  ```
</CodeGroup>

npm install

An optional label after the language tag (or a title prop on the child) becomes the tab name. See Code Group for details.