# Code

Use fenced code blocks for single syntax-highlighted examples. Use `CodeGroup` when the same example has package-manager, framework, or platform variants.

## Usage

````md
```bash title="Install"
npm install reallysimpledocs
```
````

Add `title="..."` after the language to render a titled code block.

## Options

### Fenced code

| Metadata | Type | Default | Notes |
| --- | --- | --- | --- |
| `language` | `string` | `"text"` | Language passed to Shiki. |
| `title` | `string` | `undefined` | Optional header label, written as `title="..."` after the language. |

### CodeGroup

| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `class` | `string` | `""` | Extra classes applied to the wrapper. |

`CodeGroup` expects titled fenced code blocks as children. Untitled code blocks are ignored because there is no tab label. Keep the `CodeGroup` name for tabbed code; use `Tabs` for generic grouped content.

## Examples

### Default

```bash
npm install reallysimpledocs
```

### With title

```js title="astro.config.mjs"
import { defineConfig } from "astro/config";
import reallySimpleDocs from "reallysimpledocs/astro";

export default defineConfig({
  integrations: [
    reallySimpleDocs({
      site: {
        title: "Acme Docs",
      },
    }),
  ],
});
```

### Tabbed group

<Preview lang="mdx" class="block w-full">
<CodeGroup>
```bash title="npm"
npm install reallysimpledocs basecoat-css@beta tailwindcss
```

```bash title="pnpm"
pnpm add reallysimpledocs basecoat-css@beta tailwindcss
```

```bash title="yarn"
yarn add reallysimpledocs basecoat-css@beta tailwindcss
```

```bash title="bun"
bun add reallysimpledocs basecoat-css@beta tailwindcss
```
</CodeGroup>
</Preview>