# Code 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.](https://help.gocapable.com/images/3bfc4f5d-c7e9-4145-8c72-f54523b81c8a.webp) 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](https://help.gocapable.com/images/0b6af67e-991c-4b16-a1ab-bb60706066de.webp) 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.](https://help.gocapable.com/images/2e99e3f9-fc41-4963-ae74-2508132dcebb.webp) 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. | --- ## Related [LaTeX mathRenders a block mathematical equation written in LaTeX, centred on its own line in the page.](https://help.gocapable.com/macros/latex-math.html) [LaTeX math inlineRenders a small LaTeX equation inside a line of text, sized to sit on the baseline with the wor](https://help.gocapable.com/macros/latex-math-inline.html) [Technical and dataThe rest of this family.](https://help.gocapable.com/macros/technical-and-data.html) --- _The largest family, and the most precise._