Skip to main content

Confluence Code Editor: Syntax Highlighting, Themes & Dark Mode Guide

· 4 min read
NGPilot
NGPilot
NGPilot

Confluence's built-in code block macro is limited — it supports roughly 30 languages, has no dark theme, and lacks basic features like copy buttons and collapsible sections. If your team writes documentation with code snippets, you need something better.

This guide shows how to add a VS Code-grade code editor to Confluence with syntax highlighting for 85+ languages, automatic dark/light theme detection, and one-click copy buttons.

The problem with Confluence's native code blocks​

Confluence's default code block macro has several limitations:

  • Limited language support — only about 30 languages have syntax highlighting
  • No dark theme — the code block always renders in light mode, even if Confluence is in dark mode
  • No copy button — users must manually select and copy code
  • No line numbers — difficult to reference specific lines in code reviews
  • No collapsible blocks — long code snippets take up entire pages

Modern Code Blocks for Confluence​

Modern Code Blocks for Confluence replaces the native code block with a Monaco-powered editor — the same engine that powers VS Code.

Key features​

FeatureNative Code BlockModern Code Blocks
Language support~30 languages85+ languages
Dark/light themeLight onlyAuto-detects Confluence theme
Copy buttonNoYes, on every block
Collapsible blocksNoYes
Line numbersNoYes
EditorBasic textareaMonaco editor
FontSystem fontCustomizable monospace

How to add syntax highlighting to Confluence code blocks​

Step 1: Install Modern Code Blocks​

Go to the Modern Code Blocks listing on the Atlassian Marketplace and click Get it now. The app installs directly into your Confluence Cloud instance.

Modern Code Blocks is free for up to 10 users. Beyond 10 users, standard Atlassian Marketplace licensing applies.

Step 2: Insert the macro​

Open any Confluence page in edit mode. Type /modern code and select Modern Code Blocks from the macro dropdown.

Step 3: Paste code and select a language​

Paste your code into the editor. Choose the programming language from the dropdown — 85+ languages are supported including:

  • Web: JavaScript, TypeScript, HTML, CSS, SCSS, Vue, React JSX
  • Backend: Python, Java, Go, Rust, C#, Ruby, PHP, Kotlin, Scala
  • Data: SQL, GraphQL, JSON, YAML, TOML, XML
  • DevOps: Dockerfile, Terraform, Kubernetes YAML, Bash, PowerShell
  • And many more: Swift, Dart, R, Lua, Haskell, Elixir, and more

Step 4: Choose a theme​

Modern Code Blocks auto-detects your Confluence dark/light mode setting and matches it automatically. If your Confluence is in dark mode, code blocks render in dark mode — and vice versa.

You can also manually override the theme per block if needed.

Step 5: Save the page​

Click Publish or Save. The code block renders with full syntax highlighting, line numbers, and a one-click copy button.

Supported languages (selection)​

Here are some of the most popular languages with full syntax highlighting:

Python, JavaScript, TypeScript, Java, Go, Rust, C++, C#, Ruby, PHP,
Swift, Kotlin, Scala, R, MATLAB, SQL, GraphQL, HTML, CSS, SCSS,
JSON, YAML, TOML, XML, Markdown, Bash, PowerShell, Dockerfile,
Terraform, Kubernetes, Vue, React JSX, Angular, Svelte, Dart,
Lua, Haskell, Elixir, Clojure, Perl, Erlang, Groovy, Vim Script

When to use Modern Code Blocks​

  • API documentation — syntax-highlighted endpoints with copy buttons for curl commands
  • Runbooks — collapsible code blocks for long scripts so pages stay readable
  • Architecture decision records — code examples alongside diagrams
  • Onboarding guides — new developers can copy setup scripts in one click
  • Code reviews — line numbers make it easy to reference specific lines

Alternative: Enhanced Markdown​

If you prefer writing code blocks in Markdown syntax, Enhanced Markdown for Confluence also supports fenced code blocks with syntax highlighting. Write standard Markdown code blocks with triple backticks and language identifiers, and they render with highlighting.

Read the comparison: Confluence Markdown vs WYSIWYG Editor FAQ.