Skip to main content

3 posts tagged with "api-documentation"

View All Tags

How to Display JSON, XML, YAML & Code in Confluence (With Syntax Highlighting)

· 10 min read
Who should read this
  • Developer teams documenting APIs, configs, and schemas in Confluence
  • Tech writers who need formatted code samples alongside prose
  • Anyone pasting JSON, XML, YAML, or SQL into Confluence and getting an unreadable wall of text
What you'll learn
  1. Why Confluence's built-in code block struggles with JSON, XML, and config files
  2. How to embed syntax-highlighted code in 85+ languages using a Monaco-powered editor
  3. Theme configuration, diff views, and screenshot-ready window chrome
  4. When to use a code block vs. a visual JSON structure diagram

The scenario every engineering team hits: you're documenting an API in Confluence, and the page needs to show a JSON response, an XML config, a YAML deployment manifest, and a SQL query — all on the same page. You paste each one into Confluence's built-in code block macro, publish, and the result is a wall of monochrome text. No syntax colors. No line numbers that work. JSON braces, XML tags, and YAML indentation all blur together. The reader has to copy-paste your snippet into VS Code just to understand it.

The root problem is that Confluence's native code block uses a basic highlighter that wasn't built for the structured data formats modern teams actually work with. JSON, XML, YAML, and SQL each have specific visual conventions — matched braces, nested tags, indentation scopes — that a generic highlighter doesn't handle well.

Modern Code Blocks for Confluence solves this by bringing the Monaco Editor — the same engine that powers VS Code — into Confluence. It accurately highlights 85+ languages including JSON, XML, YAML, SQL, GraphQL, Terraform, Dockerfile, and every mainstream programming language. This guide walks through embedding formatted code and data formats in your Confluence pages.

JSON Formatting & Display in Confluence: Code Blocks vs Structure Viewer

· 4 min read

Confluence's native code block macro renders JSON as plain text with no real formatting, no themes, and no copy button. There are two purpose-built apps that fix this, and each serves a different JSON display need:

  • Modern Code Blocks for Confluence — renders JSON as syntax-highlighted code with the Monaco editor (VS Code engine), 50+ themes, line numbers, copy button, and dark/light mode. Best for API docs, snippets, and most JSON display.
  • JSON Structure Viewer for Confluence — renders JSON as an interactive collapsible tree you can zoom and rotate. Best for exploring large, deeply nested structures.

This guide compares the two so you can pick the right one for each page.

How to Display & Format JSON in Confluence (Code Blocks + Viewer)

· 4 min read

Confluence's native code block macro renders JSON as plain text — no real syntax highlighting, no themes, no copy button. For API documentation, config references, or any page where JSON needs to be readable, that's not good enough. There are two better ways to embed JSON in Confluence, and the best one depends on how you want readers to interact with the data.

Two approaches
  1. Modern Code Blocks — renders JSON as syntax-highlighted code with the Monaco editor (VS Code engine), 50+ themes, line numbers, copy button, and dark/light mode. Best for API docs, snippets, and most use cases.
  2. JSON Structure Viewer — renders JSON as an interactive collapsible tree you can zoom and rotate. Best for exploring large, deeply nested structures.