# Modern Code Blocks for Confluence — User Guide Related blog post: [Advanced code blocks in Confluence with Modern Code Blocks](/blog/advanced-code-blocks-confluence.md) ## Overview[​](#overview "Direct link to 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](#editions) below. *** ## Editions[​](#editions "Direct link to 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[​](#installing "Direct link to 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[​](#getting-started "Direct link to Getting Started") ### Inserting a Code Block[​](#inserting-a-code-block "Direct link to Inserting a Code Block") 1. Edit a Confluence page 2. Type `/code` or `/modern` in the editor and select **Modern Code Blocks for Confluence** 3. The configuration panel opens — write or paste your code in the Monaco editor on the left 4. Adjust settings in the sidebar on the right 5. Click **Save** The rendered code block appears inline on the page. ### Re-editing a Code Block[​](#re-editing-a-code-block "Direct link to 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[​](#configuration-options "Direct link to 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[​](#theme-behavior "Direct link to 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-advanced "Direct link to 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:** 1. Set **View Mode** to **Diff** 2. Either paste a unified diff into the editor, or click **Upload .patch / .diff** to load a file 3. Pick a **Render Mode** (see below) 4. Optionally choose a separate **Theme** for the diff 5. 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 diff` produces. 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-advanced "Direct link to 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](https://carbon.now.sh) and [ray.so](https://ray.so). It makes snippets feel screenshot-ready and visually distinct on the page. **To configure window chrome:** 1. Set **View Mode** to **Single** (chrome is not available in Diff mode) 2. 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 3. 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[​](#auto-height "Direct link to 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[​](#supported-languages "Direct link to 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[​](#font "Direct link to 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[​](#keyboard-shortcuts "Direct link to 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[​](#getting-help "Direct link to Getting Help") Click the **?** icon in the top-right corner of the configuration panel to open the online documentation. *** ## Related Blog Posts[​](#related-blog-posts "Direct link to Related Blog Posts") * [Code Blocks for Confluence — Which Syntax Highlighting App?](/blog/code-blocks-confluence-monaco-editor.md) * [Advanced code blocks in Confluence with Modern Code Blocks](/blog/advanced-code-blocks-confluence.md) * [Confluence Code Blocks: Performance Tips & Monaco Editor FAQ](/blog/faq-code-blocks-performance.md) ## Support[​](#support "Direct link to Support") For issues or feature requests, please visit the app's listing on the Atlassian Marketplace. Was this helpful?👍 Yes👎 No