Code

Updated
View as text
Open in Confluence
Open in ChatGPT Open in Claude

A read-only code block with syntax highlighting, optional line numbers, a copy button and a choice of editor themes.

For putting a snippet on a page and having it look like it does in an editor: highlighted, monospaced, copyable in one click. It covers 18 languages plus auto-detection, and ships nine colour themes on top of an Auto setting that follows the reader's light/dark theme. Unlike Confluence's built-in code block you also get frame styling - corner radius, border and drop shadow - so it can be made to match the rest of a branded page. If Capable AI is enabled on your site, a Generate button will write the snippet for you from a description.

#See it

Every example below is a real macro on this page, not a screenshot, and each one is a configuration taken from a page somebody actually built. Open this page in the editor to see how any of them is set up.

A dark themed code block containing a console log statement with line numbers and a copy button, selected in the Confluence editor with a floating toolbar reading centered.
Selecting the block in the editor brings up the macro toolbar, which sets its width and position on the page.

#Dracula: json

{
  "name": "team-space",
  "labels": ["documentation", "engineering"],
  "permissions": {
    "view": "logged-in",
    "edit": "space-admins"
  }
}

#Solarized dark: shell

#!/usr/bin/env bash
set -euo pipefail

echo "Fetching latest pages..."
curl -fsSL "https://example.com/api/pages" | jq '.results[].title'

#Github dark: auto

// Enter your code here
console.log("Hello, World!");

#Settings

The Code macro's window, headed Inserting Code. A configuration row shows Language set to Javascript and Theme set to Material Dark, with ticked checkboxes for Line Wrapping and Line Numbers and a Gen
Language, theme, line wrapping and line numbers are all chosen above the editor the code is pasted into.
The Code macro configuration modal with language set to Javascript, theme set to Material Dark, line wrapping and line numbers ticked, a generate button, and a code editor below.
Language and editor theme are chosen here, along with line numbers and wrapping, and the code itself is typed into the same panel.

Setting

Values

What it changes

(the code editor itself)

Any text. Edited in a full CodeMirror editor that fills the config dialog; changes are debounced 300ms before being written back.

The snippet shown on the page. The field has no title in the JSON schema - it is simply the editor occupying the Content tab.

Language

auto (shown as "Auto Detect"), typescript, tsx, javascript, jsx, json, yaml, html, css, python, java, go, rust, php, sql, xml, markdown, shell, cpp

Which grammar is used for highlighting. On 'auto' the same heuristic runs in both the config panel and the page view - valid JSON, an XML/HTML doctype, python/java/TS/JS import shapes, JSX, YAML key lines, a shell shebang, a CSS r

Theme

auto ("Auto (Light/Dark)"), oneDark ("One Dark"), github-light ("GitHub Light"), github-dark ("GitHub Dark"), dracula, nord, material ("Material Dark"), solarized-light, solarized-dark, monokai

The syntax colour scheme. 'auto' resolves to oneDark when the page is dark and github-light when it is light, and is the only value that reacts to the reader's theme; every other value is fixed in both themes.

Line Wrapping

on / off

Wraps long lines instead of scrolling them horizontally.

Line Numbers

on / off

Shows the gutter with line numbers.

Corner radius

Slider, 0–24 px

Rounds the frame around the code block. Any value other than 12 also switches on overflow clipping so the inner editor's corners follow the frame.

Shadow

None, S, M, L (stored as none, sm, md, lg)

Resting drop shadow around the frame. This is the one place where the schema default and the new-macro default deliberately differ, so old blocks stay byte-identical while new ones get a subtle lift.

Border

Toggle. When on: Width slider 0–6 px, and a colour from the "border" brand category or a custom colour.

Draws a border around the frame. Width and colour controls only appear once the toggle is on.

The largest family, and the most precise.