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

# Code block component

> Display code in Lettercamp with syntax highlighting, line numbers, wrapping, captions, and width controls. Choose from the built-in color themes.

Use `CodeBlock` to configure a code example's appearance while keeping its content in a normal Markdown code fence. The fence specifies the language; you do not need a separate language property.

````mdx theme={null}
<CodeBlock width="wide" wrap={false} theme="ocean" caption="Fetch recent posts">

```javascript
const response = await fetch("/api/posts");
const posts = await response.json();
```

</CodeBlock>
````

## Properties

| Property | Type | Default | Description |
| - | - | - | - |
| `width` | `"regular"`, `"wide"`, or `"full"` | `"regular"` | Layout width. |
| `wrap` | Boolean | `true` | Wraps long lines. Set `wrap={false}` for horizontal scrolling. |
| `theme` | `"classic"`, `"ocean"`, `"forest"`, or `"mono"` | `"classic"` | Syntax color palette. `mono` is monochrome. |
| `caption` | String | None | Plain text below the code block. |
| Children | One fenced code block | Required | The code and its language. |

## Choose the language

Use a language identifier such as `javascript`, `typescript`, `python`, or `json` after the opening fence. Use `auto` for automatic detection or `txt` for plain text. Unknown languages remain readable without syntax colors.

Line numbers and the editor's copy control remain part of the existing code block behavior. They are not configurable component properties.

## Use the visual editor

Insert a **Code block**, choose its language, and edit the code normally. Use the block's controls to change width, wrapping, colors, or its caption. Ordinary fenced code blocks and older Lettercamp code settings remain readable; the editor saves their settings using `CodeBlock` notation.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.