Does it follow dark mode?

Yes. The block detects each reader’s Confluence light/dark theme and renders accordingly — you don’t maintain two versions.

Can I show a code diff?

Yes. The diff view renders before/after code side by side, which is useful for release notes and review pages.

Confluence App

Modern Code Blocks for Confluence

Name: Modern Code Blocks for Confluence
Rating: 4.5 (50 reviews)

Modern Code Blocks replaces Confluence’s built-in code macro with the Monaco editor — the same engine that powers VS Code. Get syntax highlighting for 85+ languages (JSON, XML, YAML, SQL, Python, and more), 50+ themes, a side-by-side diff view, collapsible blocks, one-click copy, and automatic light/dark theme detection.

Get it on the Atlassian Marketplace User Guide

Free for up to 10 users · Cloud · Atlassian Marketplace

Features

Why teams choose Modern Code Blocks

Monaco editor

The same editor that powers VS Code — real syntax highlighting, IntelliSense, and bracket matching.

85+ languages

JSON, XML, YAML, SQL, Python, Go, Rust, and 80+ more, each with accurate highlighting.

50+ themes

Match your team’s preference with 50+ themes and automatic light/dark mode detection.

Diff view & copy

Show before/after diffs inline, and give readers a one-click copy button on every block.

Getting started

How it works

1
Insert the macro
Edit a Confluence page, type /code, and select Modern Code Blocks for Confluence.
2
Pick language & theme
Choose from 85+ languages and 50+ themes. Paste your code — JSON, XML, SQL, anything.
3
Save with auto dark mode
Save and the block follows the reader’s light/dark mode automatically, with a copy button included.

FAQ

Frequently asked questions

Confluence’s built-in code macro is basic. Modern Code Blocks uses the Monaco editor (from VS Code) to render JSON, XML, YAML, SQL, and 80+ more languages with proper highlighting, themes, and a copy button.

Comparison

How Modern Code Blocks compares

Feature	Modern Code Blocks	Alternatives
Editor engine	Monaco (VS Code engine)	Basic textarea / Ace
Languages	85+ with IntelliSense	20-40, basic highlighting
Themes	50+ + auto dark/light	Light only or fixed
Diff view	Built-in side-by-side	Not available
Copy button	One-click on every block	Manual select
Forge-native	Yes, data stays on Atlassian	Connect, vendor-hosted

Use cases

What teams do with Modern Code Blocks

Embed syntax-highlighted JSON, XML, and YAML in API documentation pages
Show before/after code diffs in release notes and pull-request reviews
Create a code-snippet library with one-click copy for onboarding engineers
Document SQL queries with proper formatting in data team knowledge bases
Display multi-language code samples in tutorials and how-to guides

Learn more

Guides & tutorials

Scenario solutions

Part of these solutions

Show code, JSON, and API docs in Confluence

Confluence’s basic code macro is not enough for technical content. Learn how to present code, JSON, and OpenAPI specs so readers actually get it.

Explore more

JSON Structure Viewer for Confluence

JSON Structure Viewer transforms JSON code into visual diagrams in Confluence, making data structures easy to understand

Modern OpenAPI (Swagger) Integration for Confluence

Render OpenAPI and Swagger specifications directly on Confluence pages with an interactive, theme-aware viewer

Mermaid Plus for Confluence

Mermaid diagrams in Confluence — flowcharts, UML, Gantt, ER, C4 and 29 types with live preview, 29 templates and dark mode

Ready to try Modern Code Blocks for Confluence?

Install from the Atlassian Marketplace. Free for up to 10 users.

Get it now