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

# Code Blocks

> Syntax-highlighted code blocks with optional render-as-image, custom background colors, alignment, and spacing.

## Standard code blocks

Use triple backticks with an optional language identifier:

````markdown theme={null}
```javascript
const greeting = "Hello, World!";
console.log(greeting);
```
````

Without a language:

````markdown theme={null}
```
Plain code block
without syntax highlighting
```
````

## Extended attributes

Append `{attrs}` after the language identifier to customize rendering:

````markdown theme={null}
```python{renderAsImage=true width=600 align=center}
def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

print([fibonacci(i) for i in range(10)])
```
````

### Render as image

Convert code blocks to PNG images in the exported document. This preserves syntax highlighting exactly as displayed:

````markdown theme={null}
```typescript{renderAsImage=true width=500}
interface Config {
  apiUrl: string;
  timeout: number;
}
```
````

### Custom background color

````markdown theme={null}
```typescript{backgroundColor="#1e293b"}
interface Config {
  apiUrl: string;
  timeout: number;
}
```
````

### Alignment and spacing

````markdown theme={null}
```sql{renderAsImage=true width=500 align=center spacingBefore=20 spacingAfter=20}
SELECT * FROM users
WHERE status = 'active'
ORDER BY created_at DESC;
```
````

## Captions and anchors

Add `caption` and `anchor` attributes to include the code block in the [List of Code Listings](/markup-reference/indices#list-of-code-listings) and enable [cross-references](/markup-reference/references):

````markdown theme={null}
```typescript{caption="Configuration interface" anchor="code-config"}
interface Config {
  apiUrl: string;
  timeout: number;
}
```
````

This renders with: *Listing 1: Configuration interface*

Reference it elsewhere:

```markdown theme={null}
See [Listing {num}](#code-config) for the configuration interface.
```

The caption prefix (e.g., `"Listing"`, `"Quellcode"`) and styling are configured in your document's [style settings](/getting-started/editor/sidebar-styles#code-captions).

## Diagrams

Code blocks with a supported diagram language (e.g., `mermaid`, `plantuml`, `graphviz`) are automatically rendered as images in the exported document. See [Diagrams](/markup-reference/diagrams) for the full list of supported diagram languages, examples, and options.

````markdown theme={null}
```mermaid{caption="System Architecture" anchor="fig-arch" align="center"}
graph LR
    A[Client] --> B[API]
    B --> C[Database]
```
````

<Info>
  Diagram code blocks with a `caption` are numbered as **figures** and appear in the List of Figures. Set `renderAsImage=false` to treat them as regular code listings instead — see [Diagrams — renderAsImage](/markup-reference/diagrams#rendering-as-code-renderasimagefalse).
</Info>

## Attribute reference

| Attribute         | Values                        | Description                                                                        |
| ----------------- | ----------------------------- | ---------------------------------------------------------------------------------- |
| `renderAsImage`   | `true`, `false`               | Render code as a PNG image in the exported document                                |
| `backgroundColor` | CSS color (e.g., `"#1e1e1e"`) | Background color of the code block                                                 |
| `width`           | Number (pixels, 10–2000)      | Width of the rendered image                                                        |
| `align`           | `left`, `center`, `right`     | Horizontal alignment                                                               |
| `caption`         | String                        | Caption for auto-numbering (List of Code Listings or List of Figures for diagrams) |
| `anchor`          | String                        | Anchor ID for cross-references                                                     |
| `spacingBefore`   | Number (pt)                   | Spacing before the code block                                                      |
| `spacingAfter`    | Number (pt)                   | Spacing after the code block                                                       |

<Note>
  The `renderAsImage` option is particularly useful for PDF/DOCX exports where you want pixel-perfect syntax highlighting. Without it, code blocks are rendered as styled text.
</Note>