Smart Code Syntax Highlighter - User Guide

A professional code syntax highlighter for Confluence that brings IDE-quality code display to your documentation.

Quick Start

1. Add the Macro

   • Edit your Confluence page

   • Type / and search for "Code Syntax Highlighter"

   • Or click + → Other macros → Search for "Code Syntax Highlighter"

Open

2. Configure and Save

   • Paste or type your code in the editor

   • Select a language from the dropdown

   • Choose your preferred theme

   • Click Save to insert the code block

Open

Interface Overview

The configuration interface consists of three main areas:

Header Controls

Open

• Title: Optional descriptive title for your code block

• Language: Select programming languages (searchable dropdown)

• Theme: Choose from 68+ professional themes

• Toggle Options

  • Collapsed - Start with code block collapsed

  • Show Header - Display metadata bar in the published view

  • Preview - Toggle minimap visibility

Code Editor

Open

A professional editor with:

• Real-time syntax highlighting

• Line numbers

• Code folding

• Auto-indentation

• Multiple selection support

Minimap Navigator (Right Panel)

Open

An IDE-style code overview panel featuring:

• Full code thumbnail preview

Key Features

1. Language Selection

Open

Supported Languages: 275+ languages including:

• Web: JavaScript, TypeScript, HTML, CSS, JSON, XML

• Backend: Python, Java, C++, C#, Go, Rust, PHP, Ruby

• Database: SQL, PL/SQL, GraphQL, MongoDB

• DevOps: Bash, PowerShell, Dockerfile, YAML

• And many more...

How to Use:

• Click the Language dropdown

• Type to search (e.g., "java" to find JavaScript, Java, etc.)

• Select your language from the filtered list

2. Theme Selection

Choose from 68+ themes to match your documentation style:

Popular Themes:

• GitHub Light/Dark

• VS Code Light/Dark Plus

• Dracula

• Monokai

• One Dark Pro

• Nord

• Material Theme variants

• Catppuccin series

Theme Preview: Changes apply instantly in the editor.

3. Code Navigation with Minimap

Open

4. Display Options

Collapsed Toggle:

• Enable to hide code by default

• Users can expand by clicking the block in the published page

Show Header Toggle:

• Display language, line count, and character count

• Provides context without cluttering the code

Preview Toggle:

• Show/hide the minimap in configuration mode

• The minimap is not visible in the published view

Published View

Once saved, your code appears beautifully formatted in Confluence pages:

Expanded View

Open

Features in published view:

• Metadata Bar: Displays language, lines, characters, and theme

• Syntax Highlighting: Rendered with your chosen theme

• Line Numbers: Clear reference points

• Collapse Button: Users can minimize long code blocks

Collapsed View

Open

• Shows basic information (language, lines, characters)

• Click to expand and view the full code

• Keeps pages clean and focused

Code Context in Pages

Code blocks integrate seamlessly into your Confluence content, providing professional technical documentation.

Configuration Options

Title Field

Open

Open

• Optional: Add a descriptive title (e.g., "User Authentication API", "Database Schema")

• Purpose: Helps readers understand the code's context

• Display: Shows at the top of the code block if Show Header is enabled

Statistics Bar

Open

Located at the bottom of the configuration interface:

• Language: Currently selected language

• Theme: Active theme name

• Lines: Total line count

• Characters: Total character count

Best Practices

Language Selection

✅ Do: Choose the specific language for accurate syntax highlighting ❌ Don't: Use generic "Text" unless code is pseudo-code

Code Organization

✅ Do: Use titles for complex code snippets ✅ Do: Break very long files into logical sections ✅ Do: Collapse non-essential code by default ❌ Don't: Include entire files when only showing key sections

FAQ

Q: Can I edit the code after saving?

A: Yes! Click the code block in edit mode to reopen the configuration interface.

Q: Which theme should I use?

A: For light Confluence pages, use GitHub Light or VS Code Light Plus. For dark mode, try GitHub Dark or Dracula.

Q: Can I copy code from the published view?

A: Yes, users can select and copy code directly from the rendered block.

Q: What happens if I select the wrong language?

A: Reopen the configuration and select the correct language. Syntax highlighting will update automatically.

Q: Why doesn't my language appear in the dropdown?

A: Try typing part of the language name. The dropdown supports search and includes 275+ languages.

Q: Does the minimap show in the published page?

A: No, the minimap is only available in the configuration interface for editing convenience.

Q: Can I use custom themes?

A: Currently, you can choose from 68+ built-in themes. Custom theme support may be added in future versions.

Quick Reference

Workflow Summary

Most Popular Languages

JavaScript • Python • Java • TypeScript • JSON • SQL • Bash • HTML • CSS • Markdown

Most Popular Themes

GitHub Light • GitHub Dark • VS Code Dark Plus • Dracula • Monokai • One Dark Pro

Toggle Quick Guide

• Collapsed: Hide code by default ✓

• Show Header: Display metadata bar ✓

• Preview: Show minimap (config only) ✓