# Dark Mode for Confluence Code Blocks — Setup Walkthrough

May 6, 2026 ·

<!-- -->

4 min read

[NGPilot](https://ngpilot.com)

<!-- -->

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[​](#the-problem-with-confluences-native-code-blocks "Direct link to 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 "Direct link to Modern Code Blocks for Confluence")

[Modern Code Blocks for Confluence](https://marketplace.atlassian.com/apps/3525717923/modern-code-blocks-for-confluence?hosting=cloud\&tab=overview) replaces the native code block with a Monaco-powered editor — the same engine that powers VS Code.

### Key features[​](#key-features "Direct link to Key features")

| Feature            | Native Code Block | Modern Code Blocks            |
| ------------------ | ----------------- | ----------------------------- |
| Language support   | \~30 languages    | 85+ languages                 |
| Dark/light theme   | Light only        | Auto-detects Confluence theme |
| Copy button        | No                | Yes, on every block           |
| Collapsible blocks | No                | Yes                           |
| Line numbers       | No                | Yes                           |
| Editor             | Basic textarea    | Monaco editor                 |
| Font               | System font       | Customizable monospace        |

## How to add syntax highlighting to Confluence code blocks[​](#how-to-add-syntax-highlighting-to-confluence-code-blocks "Direct link to How to add syntax highlighting to Confluence code blocks")

### Step 1: Install Modern Code Blocks[​](#step-1-install-modern-code-blocks "Direct link to Step 1: Install Modern Code Blocks")

Go to the [Modern Code Blocks listing on the Atlassian Marketplace](https://marketplace.atlassian.com/apps/3525717923/modern-code-blocks-for-confluence?hosting=cloud\&tab=overview) 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[​](#step-2-insert-the-macro "Direct link to 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[​](#step-3-paste-code-and-select-a-language "Direct link to 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[​](#step-4-choose-a-theme "Direct link to 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[​](#step-5-save-the-page "Direct link to 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)[​](#supported-languages-selection "Direct link to 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[​](#when-to-use-modern-code-blocks "Direct link to 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[​](#alternative-enhanced-markdown "Direct link to Alternative: Enhanced Markdown")

If you prefer writing code blocks in Markdown syntax, [Enhanced Markdown for Confluence](https://marketplace.atlassian.com/apps/1232856/enhanced-markdown-for-confluence?hosting=cloud\&tab=overview) 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](/blog/faq-confluence-markdown-vs-wysiwyg.md).

## Related resources[​](#related-resources "Direct link to Related resources")

* [Modern Code Blocks — marketplace](https://marketplace.atlassian.com/apps/3525717923/modern-code-blocks-for-confluence?hosting=cloud\&tab=overview) | [documentation](/apps/modern-code-blocks-for-confluence.md)
* [Code block themes & syntax highlighting guide](/blog/advanced-code-blocks-confluence.md)
* [Code blocks performance FAQ](/blog/faq-code-blocks-performance.md)
* [Best Confluence apps for developers](/blog/best-confluence-apps-developers.md)
* [Confluence Markdown vs WYSIWYG FAQ](/blog/faq-confluence-markdown-vs-wysiwyg.md)

## Related guides

* [Code Blocks for Confluence — Monaco Editor & Themes](/blog/code-blocks-confluence-monaco-editor.md)
* [How to Create Mermaid Diagrams in Jira](/blog/how-to-create-mermaid-diagrams-jira.md)
* [Export Jira Issues to Excel or CSV](/blog/export-jira-issues-to-excel.md)
* [Bulk Download Jira Attachments](/blog/bulk-download-jira-attachments.md)

Explore NGPILOT[Browse Solutions](/solutions.md)[All Apps](/apps.md)[Atlassian Marketplace →](https://marketplace.atlassian.com/vendors/1226848/?utm_source=ngpilot.com\&utm_medium=blog\&utm_campaign=hub-links)

**Tags:**

* [confluence](/blog/tags/confluence.md)
* [code-blocks](/blog/tags/code-blocks.md)
* [syntax-highlighting](/blog/tags/syntax-highlighting.md)
* [dark-mode](/blog/tags/dark-mode.md)
* [monaco-editor](/blog/tags/monaco-editor.md)
* [developers](/blog/tags/developers.md)