> ## Documentation Index
> [HTML page](https://blode.md/docs/content/code-blocks)
> [Documentation index](https://blode.md/docs/llms.txt)
> Use the index to discover all available pages before exploring further.

# Code blocks

Use fenced code blocks with Shiki syntax highlighting, optional titles for filenames, and CodeGroup tabs for multi-file or multi-language examples.

Fenced code blocks are automatically syntax-highlighted using Shiki with dual themes (light and dark).

## Basic usage

Use triple backticks with a language identifier:

```text
```javascript
const greeting = "Hello, world!";
console.log(greeting);
```
```

## Titles

Add a filename or label with the `title` attribute:

```text
```typescript title="src/config.ts"
export const config = {
  name: "my-project",
  version: "1.0.0",
};
```
```

## Supported languages

Shiki supports over 300 languages, including: `javascript`, `typescript`, `python`, `go`, `rust`, `bash`, `json`, `yaml`, `mdx`, `sql`, `css`, `html`, and many more.

## Multi-file examples

Use the `CodeGroup` component to show multiple related code blocks with tabbed navigation:

```text
<CodeGroup>
&#96;&#96;&#96;bash title="npm"
npm install edda-docs
&#96;&#96;&#96;

&#96;&#96;&#96;bash title="pnpm"
pnpm add edda-docs
&#96;&#96;&#96;

&#96;&#96;&#96;bash title="yarn"
yarn add edda-docs
&#96;&#96;&#96;

</CodeGroup>
```

Tabs are automatically labeled from the `title` attribute. If no title is set, the language name is used.

## Inline code

Use single backticks for inline code: `` `edda push` `` renders as `edda push`.