Code Blocks
Add code blocks to a document in the Dock Editor. Syntax highlighting, the language banner, and the languages supported by the highlighter.
When a document needs code, a configuration snippet, or a command, a code block keeps it monospaced, highlighted, and easy to read. Dock highlights code with lowlight, the syntax engine built on highlight.js.
Type / and choose Code Block from the slash menu. The block drops in as a monospaced region with its own background, separate from the prose around it. Type or paste your code inside it.
Code inside a block is highlighted by language, so keywords, strings, and comments are colored the way they are in an editor. The highlighting is read-only styling: it colors what you write without changing the code.
Each code block carries a banner that names its language. Set the language from the banner so the highlighter knows how to color the block. A JavaScript snippet, a Python function, and a shell command each highlight to their own rules once the language is set.
The highlighter supports the common programming and markup languages you would expect in a technical document: JavaScript and TypeScript, Python, shell, JSON, HTML and CSS, and many more. Set the closest language from the banner and the block highlights accordingly.
For a short snippet inside a sentence, use inline code from the formatting toolbar instead of a full block. Inline code keeps the monospace styling without breaking the flow of the paragraph. See Formatting Text for inline styles, and Slash Commands for inserting blocks.