> ## Documentation Index
> Fetch the complete documentation index at: https://docs.blode.md/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Code blocks

Syntax highlighting, titles, and multi-file code 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
&#96;&#96;&#96;javascript
const greeting = "Hello, world!";
console.log(greeting);
&#96;&#96;&#96;
```

## Titles

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

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

## 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 blodemd
&#96;&#96;&#96;

&#96;&#96;&#96;bash title="pnpm"
pnpm add blodemd
&#96;&#96;&#96;

&#96;&#96;&#96;bash title="yarn"
yarn add blodemd
&#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: `` `blodemd push` `` renders as `blodemd push`.