Modern Code Blocks for Confluence — User Guide
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 78+ languages, automatic dark/light theme matching, and a full-featured editing experience.
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 |
|---|---|---|---|
| Language | Syntax highlighting language | Plain Text | 78+ languages (see list below) |
| Theme | Color theme for the code block | Auto | Auto, Light, Dark, High Contrast |
| 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 |
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.
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, F#, Go, GraphQL, Handlebars, HCL, HTML, INI, Java, JavaScript, JSON, Julia, Kotlin, Less, Lexon, Liquid, Lua, M3, Markdown, MDX, MySQL, Objective-C, Pascal, Pascaligo, Perl, PostgreSQL, PHP, PLA, Postiats, Power Query, PowerShell, Plain Text, Protocol Buffers, Pug, Python, Q#, R, Redis, Redshift, reStructuredText, Ruby, Rust, SB, Scala, Scheme, SCSS, Shell / Bash, Solidity, Sophia, SPARQL, SQL, ST, Swift, SystemVerilog, Tcl, Terraform, 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.
Support
For issues or feature requests, please visit the app's listing on the Atlassian Marketplace.