A code block is an editor-style card for the snippets that belong in a technical diagram: the payload next to an API arrow, the config beside an infrastructure node, the query under a database. It renders code in a monospace font with syntax highlighting, and it lives on the canvas like any other element, so you can place, resize, rotate, lock and move it freely.
Adding one
In Illustrate, open the Components category on the palette strip. In any mode you can also add it by name from the Search panel.
An empty block shows a muted // double-click to add code placeholder until you do.
Editing the code
Double-clicking opens the Code dialog: a monospace editor where Tab inserts two spaces instead of moving focus, so indenting works the way it does in a real editor. Pick the snippet's language from the Language dropdown and Save; the block updates in one undoable step. A block holds up to 4,000 characters.
The same dialog is one right-click away: open Tools, then Code, and choose Edit Code. That section also shows how many lines the block holds and in which language, and carries Wrap Long Lines. Wrapping is on by default, so a long line folds onto the next one instead of running off the card; turn it off for a block whose lines only make sense at their full length.
Languages and highlighting
Pick from ten languages: plain text, plus nine with syntax highlighting: TypeScript, JavaScript, Python, JSON, Bash, SQL, HTML, CSS, and YAML (the dropdown lists them by their short names, such as ts, js and sql). The chosen language shows as a small badge in the block's top-right corner (hidden for plain text), so a reader can tell a SQL query from a YAML manifest at a glance.
Colour schemes
A code block paints from a colour scheme rather than from the theme, so switching or restyling the tab's theme never recolours it. It starts in Midnight, the dark card. To change it, right-click the block, open Style, and pick from its Presets: Midnight, Graphite, Ocean, Forest, Plum and Contrast are dark, and Paper and Parchment are light, for a block on a light, warm board. Each scheme sets the card and every syntax colour together, so a block can't end up unreadable, which is also why a code block has no Colours or Border controls.
Exports and share thumbnails draw the block in its scheme as plain monospace text, without the syntax colours.
Reach for a code block instead of a text element whenever the content is code: you get monospace alignment, preserved whitespace, and highlighting for free.
Was this article helpful?