Skip to main content

​
Standard code blocks

Use triple backticks with an optional language identifier: 
```javascript
const greeting = "Hello, World!";
console.log(greeting);
```
Without a language: 
```
Plain code block
without syntax highlighting
```

​
Extended attributes

Append {attrs} after the language identifier to customize rendering: 
```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: 
```typescript{renderAsImage=true width=500}
interface Config {
  apiUrl: string;
  timeout: number;
}
```

​
Custom background color

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

​
Alignment and spacing

```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 and enable cross-references: 
```typescript{caption="Configuration interface" anchor="code-config"}
interface Config {
  apiUrl: string;
  timeout: number;
}
```
This renders with: Listing 1: Configuration interface Reference it elsewhere: 
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.

​
Diagrams

Code blocks with a supported diagram language (e.g., mermaid, plantuml, graphviz) are automatically rendered as images in the exported document. See Diagrams for the full list of supported diagram languages, examples, and options. 
```mermaid{caption="System Architecture" anchor="fig-arch" align="center"}
graph LR
    A[Client] --> B[API]
    B --> C[Database]
```
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.

​
Attribute reference

AttributeValuesDescription
renderAsImagetrue, falseRender code as a PNG image in the exported document
backgroundColorCSS color (e.g., "#1e1e1e")Background color of the code block
widthNumber (pixels, 10–2000)Width of the rendered image
alignleft, center, rightHorizontal alignment
captionStringCaption for auto-numbering (List of Code Listings or List of Figures for diagrams)
anchorStringAnchor ID for cross-references
spacingBeforeNumber (pt)Spacing before the code block
spacingAfterNumber (pt)Spacing after the code block
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.