How to collapse code blocks and switch their theme in Confluence

Confluence Cloud’s code block has no way to collapse it and no choice of background or colours. The Code blocks for Confluence template adds a bar to every code block on a page with its language, its line count, a Collapse button and a Dark/Light theme switch, in your own browser.

Steps

1. In Skins Studio, open Explore, pick Code blocks for Confluence and click Create App.
2. On a Confluence page, open the Skins side panel from the browser toolbar. The Code blocks skin is listed under On this page.
3. Switch it on. The page reloads with a bar above every code block.

What you get

• A bar on every code block showing its language, guessed from the code (Shell, JSON…), and its line count.
• A Collapse/Expand button on each block.
• Blocks longer than 20 lines start collapsed.
• A Dark/Light theme switch with syntax colours for strings, flags and numbers.
• The theme you pick applies to every code block.

Limits

• It changes how code blocks look in your browser, not the page itself. Readers who don’t use the skin see the default block.
• The language is guessed from the code, not set by the page’s author.
• Authors can’t choose colours per block or highlight specific lines.
• It doesn’t add a title field to code blocks.

Other options

• Marketplace code-block apps: apps from the Atlassian Marketplace add their own code macros. An admin has to install them.
• Expand around a long block: put the code block inside Confluence’s Expand element. It collapses the block for everyone who reads the page.
• Atlassian’s customer interviews: on 2026-09-18 Atlassian’s Confluence product team asked on the ticket for customer interviews about code-block themes and colours. No feature has been announced.
• Ask Atlassian: vote on the ticket. Its status is Gathering Interest.