Code block component

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.

<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.

Getting started

Writing

Content components

Design

Site settings

Custom components

Publishing

CLI

Code block component

Properties

Choose the language

Use the visual editor