Add elements to a page or live doc
Along with the text you add to a page or live doc, elements are the building blocks that help you organize and present information in the way you want.
All the items that can be inserted onto a page are elements. Elements include dates, status lozenges, panels, Confluence macros, and Marketplace macros.
What are macros? Confluence macros are a sub-set of elements that help you extend functionality. Macros usually have a more complex setup than basic elements like a date or a status.
Does your toolbar look different?
Your toolbar or editing controls may appear differently from usual, or from how they appear in this documentation. We’re rolling out features that are subject to change.
Basic elements
These elements can be inserted from the menu, from the toolbar, or from the slash command menu.
Action items
Add a checklist item and assign the task to another person using an @ mention. Items assigned to others show up in their tasks list under their profile. They can tick them off as the task is completed. If a date is added, the task turns red if it becomes past due.
Type /action to quickly add this element from the slash command.
Code snippet
Code snippets let you format source code with numbered rows and syntax highlighting based on the language you choose. New code blocks added via the Confluence editor are wrapped by default.
Add a code snippet
There are several ways to add a code snippet to your page or live doc:
Select Code from the Format text menu in the main toolbar.
Type
/codeto quickly add the element from the slash command.Type three back ticks (```) to create a code block.
Type text between two back ticks (for example, `some text`) to create inline code.
Use the floating toolbar that appears when you select a code block to customize its appearance and formatting.
Auto-detect a language
New code blocks automatically detect the programming language by default. Auto-detection is available for the following languages: CSS, Go, HTML, Java, JavaScript, JSON, Python, Ruby, Rust, Shell, SQL, and TypeScript.
To initiate auto-detection:
Type or paste your code into a new code block.
The editor will identify the language and display it in the picker with a (detected) suffix.
To override this, manually select a language from the picker. Once a manual selection is made, auto-detection is disabled for that block.
Access recently used languages
To access the programming languages you use frequently:
Open the language picker in the code block toolbar.
View your three-most recently selected languages under the Recently used section at the top of the menu.
When you select a language, it appears at the top of Recently used.
Format code
You can automatically clean up the spacing and indentation of your code for supported languages, which are JavaScript/JSX, JSON, and SQL.
Select the code block.
Select Format from the floating toolbar.
If the code has syntax errors, an error flag will appear and the content will remain unchanged.
The button is disabled for unsupported languages.
Toggle line numbers
Select the code block.
Select the Hide line numbers to hide, or Show line numbers to display them.
Wrap or unwrap code
Select the code block.
Select the Wrap code or Unwrap code, based on your preference.
In edit mode: Wrapping changes are persistent and will remain active after the page is saved.
In view mode: You can toggle wrapping, but the change is temporary and will reset when the page is refreshed.
Date
Make a date stand out with grey background; the default date format is Mon DD, YYYY.
Type // to bring up a date picker.
Decision
Emphasize a distinct decision made for a project or by a team by adding a grey background panel and a green icon.
Type /decision to quickly add this element from the slash command.
Divider
Separate sections of text using a horizontal line.
Type /divider to quickly add this element from the slash command.
Emoji
Express a feeling, emotion, or info type with an image. The library of emojis available are a combination of standard Confluence emojis and those added by users of your site. Learn more about emojis
Type /emoji to quickly add this element from the slash command.
Expand
Create a collapsed section that reveals more information for the people who seek it. This is a useful formatting element when the amount of info on a page or doc is overwhelming at first glance.
Type /expand to quickly add this element from the slash command.
Heading
Format text to represent the hierarchy of information on a page or live doc. Once headings are created, use the Table of Contents Macro to generate a list of links pointing to the headings on your content. The list of links appears wherever you add the macro, and it automatically updates each time someone changes the wording of a heading or the heading level.
Type /heading to quickly see the options and add this element from the slash command.
Mention
Reference a person and let them know about it. The user mentioned receives a notification.
Type @ and enter part of a name to narrow the list of matches.
Panel
Emphasize information by choosing a preset panel type to consistently communicate ideas like info, note, error, success, and warning. The preset types include an emoji and a background color.
In addition to the five preset panel options, you can customize panels by choosing one of the 20 background colors available. Panels can have emojis, or you can remove the emoji to meet the needs of your content. The emojis available to you are the same set that you already use in Confluence; this includes custom emojis you and your teammates have added.
Type /panel to quickly see the options and add this element from the slash command.
Quote
Emphasize a quote by adding a vertical line on its left margin and adjusting the font color.
Type /quote to quickly add this element from the slash command.
Status
Highlight text to stand out and choose the background color that fits its meaning.
Type /status to quickly add this element from the slash command.
Was this helpful?