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;
```

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