Modern Code Blocks for Confluence — User Guide
Related blog post: Advanced code blocks in Confluence with Modern Code Blocks
Overview
Modern Code Blocks for Confluence is a Forge app that inserts beautifully rendered code snippets with syntax highlighting powered by the Monaco Editor (the same engine behind VS Code). It supports 85+ languages, automatic dark/light theme matching, optional 50+ premium themes, a diff view for comparing two versions of a code sample side by side, and optional terminal-style window chrome (macOS / Windows) to make snippets feel screenshot-ready.
The app ships in two editions — see Editions below.
Editions
| Standard | Advanced | |
|---|---|---|
| Syntax highlighting (85+ languages) | ✅ | ✅ |
| Auto light/dark + 4 built-in themes | ✅ | ✅ |
| 50+ premium themes (Monokai, Dracula, Nord, Solarized, …) | — | ✅ |
| Diff View (raw patch + inline render modes) | — | ✅ |
| Separate diff theme | — | ✅ |
| Window Chrome (macOS / Windows title bar) | — | ✅ |
Both editions are installed by the same Marketplace listing. The edition a site receives is controlled by the license tier purchased in the Atlassian Marketplace. Trial licenses unlock all Advanced features for the duration of the trial.
If a Standard user opens a code block that was configured with Advanced features (e.g. a diff block created during a trial), the block shows an upgrade prompt instead of the diff — no broken rendering.
Installing
Install the app from the Atlassian Marketplace. Once installed, the macro is available in the Confluence macro browser under the name Modern Code Blocks for Confluence.
Getting Started
Inserting a Code Block
- Edit a Confluence page
- Type
/codeor/modernin the editor and select Modern Code Blocks for Confluence - The configuration panel opens — write or paste your code in the Monaco editor on the left
- Adjust settings in the sidebar on the right
- Click Save
The rendered code block appears inline on the page.
Re-editing a Code Block
Click on an existing code block and select Edit to reopen the configuration panel. All your code and settings are preserved.
Configuration Options
| Option | Description | Default | Values |
|---|---|---|---|
| View Mode | Single code block, or diff view (Advanced only) | Single | Single, Diff (Advanced) |
| Language | Syntax highlighting language | Plain Text | 85+ languages (see list below) |
| Theme | Color theme for the code block | Auto | Auto, 4 built-ins, 50+ premium themes (Advanced) |
| Render Mode (Diff only) | How the diff is rendered to readers | Raw | Raw, Inline |
| Max Height | Maximum block height in pixels before scrolling | 600 | 100–5000 |
| Font Size | Code font size in pixels | 14 | 8–32 |
| Line Numbers | Line number display mode | On | On, Off, Relative |
| Word Wrap | Wrap long lines | On | On, Off |
| Show Minimap | Show a code minimap overview | Off | On / Off |
| Window Style (Single only) | Terminal-style window chrome around the block | None | None, macOS, Windows (Advanced) |
When View Mode = Diff, the Theme selector controls the diff theme independently from any single-view blocks on the same page.
Theme Behavior
- Auto — automatically matches the reader's Confluence theme (light or dark). When Confluence is in dark mode, the code block renders in VS Code Dark; in light mode, it uses VS Code Light.
- Light — always uses the VS Code Light theme.
- Dark — always uses the VS Code Dark theme.
- High Contrast — always uses the High Contrast Black theme.
- Premium themes (Advanced) — 50+ curated themes including Monokai, Dracula, Nord, Solarized Light/Dark, GitHub Dark, One Dark Pro, Material, Cobalt2, and more. Themes are bundled with the app (no CDN calls) and lazy-loaded on first use.
For Standard users, premium theme selections are visible in the dropdown but revert silently to Auto if chosen — no error.
Diff View (Advanced)
Diff View lets you embed a code change — a .patch / .diff file, or pasted unified diff — rendered as a colored, line-by-line comparison. Useful for migration guides, changelogs, and refactoring notes.
To configure a diff block:
- Set View Mode to Diff
- Either paste a unified diff into the editor, or click Upload .patch / .diff to load a file
- Pick a Render Mode (see below)
- Optionally choose a separate Theme for the diff
- Click Save
Render Modes:
- Raw — the patch text rendered as-is, with
+lines green and-lines red (GitHub-style). - Inline — the patch parsed and re-rendered as a single interleaved view: unchanged lines, then removed lines in red, then added lines in green — the layout
git diffproduces.
The macro view itself has no toolbar — the author's chosen render mode is what every reader sees, so the block renders consistently for everyone.
Window Chrome (Advanced)
Window Chrome wraps your single-view code block in an optional OS-style title bar — the same look popularized by carbon.now.sh and ray.so. It makes snippets feel screenshot-ready and visually distinct on the page.
To configure window chrome:
- Set View Mode to Single (chrome is not available in Diff mode)
- Pick a Window Style:
- None — no chrome (default)
- macOS — three traffic-light buttons (red / yellow / green) on the left
- Windows — three caption buttons (minimize / maximize / close) on the right
- Click Save
The title bar shows a filename auto-derived from your selected language — for example, main.js for JavaScript, script.sh for Shell, Dockerfile for Dockerfile. No manual title entry needed.
The chrome palette adapts to your code theme automatically: light title bar for light themes (Solarized Light, GitHub Light), dark title bar for dark themes (Monokai, Dracula, VS Code Dark).
For Standard users, the macOS and Windows options appear disabled in the dropdown under an "Enabled in Advanced Edition" group. Existing blocks saved with chrome render without it for Standard viewers — no broken UI, just the plain code block.
Auto-Height
Code blocks automatically expand to fit their content, up to the configured Max Height. If the code is shorter than the max height, the block shrinks to fit — no unnecessary whitespace. If the code exceeds the max height, vertical scrolling is enabled.
Supported Languages
The app supports syntax highlighting for the following languages:
ABAP, Apex, Azure CLI, Batch, Bicep, Cameligo, Clojure, CoffeeScript, C++, C#, CSP, CSS, Cypher, Dart, Dockerfile, ECL, Elixir, Flow9, FreeMarker, F#, Go, GraphQL, Handlebars, HCL, HTML, INI, Java, JavaScript, JSON, Julia, Kotlin, Less, Lexon, Liquid, Lua, M3, Markdown, MDX, MIPS, MS DAX, MySQL, Objective-C, Pascal, Pascaligo, Perl, PostgreSQL, PHP, PLA, Postiats, Power Query, PowerShell, Protocol Buffers, Pug, Python, Q#, R, Razor, Redis, Redshift, reStructuredText, Ruby, Rust, SB, Scala, Scheme, SCSS, Shell / Bash, Solidity, Sophia, SPARQL, SQL, ST, Swift, SystemVerilog, Tcl, Terraform, Twig, TypeSpec, TypeScript, Visual Basic, Verilog, WGSL, XML, YAML.
Font
The code block uses a monospace font stack optimized for code readability and ligature support:
JetBrains Mono, Fira Code, Source Code Pro, Cascadia Code, Consolas, Courier New
Font ligatures are enabled by default. Supported browsers will render combined characters like =>, !==, and >= as single glyphs when using a ligature-capable font (e.g., JetBrains Mono, Fira Code).
Keyboard Shortcuts
The configuration editor supports standard Monaco Editor shortcuts:
| Shortcut | Action |
|---|---|
Ctrl/Cmd + Z | Undo |
Ctrl/Cmd + Shift + Z | Redo |
Ctrl/Cmd + C | Copy |
Ctrl/Cmd + X | Cut |
Ctrl/Cmd + V | Paste |
Ctrl/Cmd + F | Find |
Ctrl/Cmd + H | Find and Replace |
Ctrl/Cmd + A | Select All |
Tab | Insert tab (2 spaces) |
Getting Help
Click the ? icon in the top-right corner of the configuration panel to open the online documentation.
Related Blog Posts
- Code Blocks for Confluence — Which Syntax Highlighting App?
- Advanced code blocks in Confluence with Modern Code Blocks
- Confluence Code Blocks: Performance Tips & Monaco Editor FAQ
Support
For issues or feature requests, please visit the app's listing on the Atlassian Marketplace.