We rebuilt our code block for Confluence: 50 themes, a diff view, and editor chrome

[#1]

Confluence ships a Code Block Macro. You've used it. Pick a language, paste your code, get syntax highlighting once the page is published. It works, and it has looked roughly the same way for a long time.

I'm Simon from NGPILOT. Earlier this year we put out Modern Code Blocks for Confluence to push past that — a code macro built on the Monaco editor (the same one VS Code uses), with 85+ languages, a live preview, and theme sync that follows Confluence's light or dark mode. Today we're shipping the biggest update since launch: an Advanced Edition with 50+ premium themes, a diff view for rendering patches inline, and a new editor-style window frame around each block.

This is the story of what was dull, what we added, and why.

---

What was actually dull

The native macro's limits are well-rehearsed on this Community:

• Highlighting only appears after you publish. There's no preview while you edit.
• Language support is broad, but the tokenizer is old, and anything niche renders flat.
• There's no real theme system. Light, dark — that's the menu.
• There's no way to show a code change. If you want to document a patch or a before/after, you paste it as plain text and let the reader mentally parse the + and - lines.

A few Marketplace apps have had a go at this. Better Code Macro (Atlassian Labs) leads on installs; Advanced Codeblocks (codeclou) and a small handful of others add features. Numbers from marketplace, June 2026 — no commentary on the vendors, just the lay of the land. What none of them did, to our eyes, was make the block look like something you'd open in your editor. That's the part technical readers notice first.

---

What we added

The Advanced Edition ships three things on top of the Standard app. Every block is configured from one panel — the Monaco editor where you write the code on the left, and the options sidebar on the right:

View Mode, Language, Theme, Window Style, height, font size, line numbers, word wrap, minimap — all of it lives in that one sidebar. The rest of this section is what's new in there.

50+ premium themes

Auto theme sync stays the default — a block follows the reader's Confluence color mode, light or dark, in real time. New in this release: 50+ curated themes you can pin to a block instead. Monokai, Dracula, Nord, Solarized Light and Dark, One Dark Pro, Material, Cobalt2, GitHub Dark, and the rest. They ship bundled inside the app — no external CDN calls — and load the first time a reader hits one.

A page that needs a consistent look regardless of who's reading — an internal style guide, a branded runbook, a customer-facing doc — can now pin a theme and stay put.

Diff view

Flip a block from Single to Diff in the same panel — same editor, same sidebar, just a different View Mode:

Then paste a unified diff, or upload a .patch / .diff file. Readers get a colored, line-by-line comparison instead of raw patch text. Two render modes:

• Raw — the patch as-written. Added lines green, removed lines red. GitHub-style.
• Inline — the patch parsed and re-rendered as a single interleaved view: context lines, then deletions in red, then additions in green. The layout git diff produces.

That's a real diff, by the way — the package.json change that pulled in the theme engine powering the premium themes above. The author picks the render mode once; every reader sees the same thing. No toolbar on the published block, no "toggle to see it differently" surprises.

This came straight from how people use Confluence — migration notes, changelogs, refactoring walkthroughs.

Editor-style window chrome

In the Advanced Edition, every single-view block renders inside a small editor window: a title bar with a filename centered in it, and platform-style window controls in the corner. The author picks the variant per block — the macOS traffic-light dots, or the Windows button set — so a block can match the platform its code actually runs on.

It's cosmetic, but it's the part that makes a page of code blocks read like documentation rather than a paste-dump. And it applies to plain text too, not just highlighted languages — notes, config samples, and shell transcripts get the same frame.

---

Two themes, same snippet

The contrast between Auto and a pinned premium theme is the easiest way to see what changed. Same C++ snippet, same macOS frame — one in Auto (light), one pinned to GitHub Dark:

Same code, same chrome — two very different pages.

---

Editions, briefly

One Marketplace listing, two editions, decided by the license tier:

	Standard	Advanced
Monaco editor with live preview	✅	✅
Syntax highlighting (85+ languages)	✅	✅
Auto theme + 4 built-in themes	✅	✅
Auto-height, font size, line numbers, word wrap, minimap	✅	✅
Editor window chrome (macOS / Windows)	—	✅
50+ premium themes (Monokai, Dracula, Nord, Solarized…)	—	✅
Diff View (Raw + Inline render modes)	—	✅
Separate diff theme	—	✅

Trials unlock all the Advanced features for the trial window. If a Standard reader later opens a block that was configured with Advanced features during a trial, they see a clean upgrade prompt — no broken render.

---

Where we are

Modern Code Blocks is still new — 1 install, 0 reviews as I write this. The point of this release isn't a victory lap. It's to say: the category existed, the existing options were tired, and a Confluence code block no longer has to look like 1995.

If you write technical documentation in Confluence, give it a try and tell us what's missing.

• Modern Code Blocks for Confluence

---

Pair it with markdown prose

Modern Code Blocks is for the moments where a code sample deserves its own block — full chrome, a pinned theme, a filename in the title bar. Plenty of pages also need smaller inline code inside prose, a Mermaid diagram, or a WYSIWYG markdown edit. For that, our Enhanced Markdown for Confluence covers the same ground in a different shape. Two tools for two shapes of the same job.

• Enhanced Markdown for Confluence