View Source

This page describes the XHTML-based format that Confluence uses to store the content of pages, page templates, blueprints, blog posts and comments. This information is intended for advanced users who need to interpret and edit the underlying markup of a Confluence page.

Notes:

You can view the Confluence storage format for a given page by choosing Tools > View Storage Format. This option is only available if one of the following is true:
- You are a Confluence administrator.
- Your Confluence site has the Confluence Source Editor plugin installed and you have permission to use the source editor.
If you would like to edit the storage format for a page, your Confluence system administrator will need to install the Confluence Source Editor plugin.
Clarification of terminology: If you choose Tools > View Source, you will see the format used within the editor panel, not the storage format of the page.

On this page:

Related pages:

Macros

See Confluence Storage Format for Macros.

Headings

Format type

In Confluence 3.5 and earlier

In Confluence 4.0 and later

What you will get

Heading 1

h1. Heading 1

<h1>Heading 1</h1>

Confluence 5.1 > Confluence Storage Format > heading1.png

Underlined in the Documentation Theme

Heading 2

h2. Heading 2

<h2>Heading 2</h2>

Confluence 5.1 > Confluence Storage Format > heading2.png

Underlined in the Documentation Theme

Heading 3

h3. Heading 3

<h3>Heading 3</h3>

Confluence 5.1 > Confluence Storage Format > heading3.png

Headings 4 to 6 are also available and follow the same pattern

Text effects

Format type

In Confluence 3.5 and earlier

In Confluence 4.0 and later

What you will get

strong/bold

*strong*

<strong>strong text</strong>

strong

will also work but get converted to upon saving

emphasis

_emphasis_

<em>Italics Text</em>

emphasis

will also work but get converted to upon saving

strikethrough

-strikethrough-

<span style="text-decoration: line-through;">strikethrough</span>

~~strikethrough~~

<s> and <del> will also work

underline

+underline+

<u>underline</u>

underline

superscript

^superscript^

<sup>superscript</sup>

^superscript

subscript

~subscript~

<sub>subscript</sub>

_subscript

monospace

{{monospaced}}

<code>monospaced</code>

monospaced

preformatted

n/a

<pre>preformatted text</pre>

preformatted text

block quotes

bq. block quote

or

{quote} 

              block

              quote

              {quote}

<blockquote><p>block quote</p></blockquote>

block quote

text colour

{color:red}red text{color}

<span style="color: rgb(255,0,0);">red text</span>

red text

small

n/a

<small>small text</small>

small text

big

n/a

<big>big text</big>

big text

center-align

n/a

<p style="text-align: center;">centered text</p>

centered text

right-align

n/a

<p style="text-align: right;">right aligned text</p>

right aligned text

Text breaks

Format type

In Confluence 3.5 and earlier

In Confluence 4.0 and later

What you will get

New paragraph

Paragraph 1

              (empty line)

              Paragraph 2

<p>Paragraph 1</p>
<p>Paragraph 2</p>

Paragraph 1

Paragraph 2

Line break

Line 1 \\ Line 2

Line 1 <br /> Line 2

Note: Created in the editor using Shift + Return/Enter

Line 1
Line 2

Horizontal rule

----

<hr />

— symbol

---

&mdash;

—

– symbol

--

&ndash;

–

Lists

Format type

In Confluence 3.5 and earler

In Confluence 4.0 and later

What you will get

Unordered list – round bullets

* Round bullet list item

<ul>
<li>round bullet list item</li>
</ul>

Round bullet list item

Unordered list – squarebullets

- Square bullet list item

<ul style="list-style-type: square;">
<li>square bullet list item</li>
</ul>

Square bullet list item

Ordered list (numbered list)

# Ordered list item

<ol>
<li>numbered list item</li>
</ol>

Ordered list item

Task Lists

[] Task list item

<ac:task-list>
    <ac:task>
        <ac:task-status>incomplete</ac:task-status>
        <ac:task-body>task list item</ac:task-body>
    </ac:task>
</ac:task-list>

task list item

Links

Format type

In Confluence 3.5 and earlier

In Confluence 4.0 and later

What you will get

Link to another Confluence page

[Link to another Confluence page|Page Title]

<ac:link>
<ri:page ri:content-title="Page Title" />
<ac:plain-text-link-body>
 <![CDATA[Link to another Confluence Page]]>
</ac:plain-text-link-body>
</ac:link>

Link to another Confluence page

Link to an attachment

[Link to an attachment^atlassian_logo.gif]

<ac:link>
<ri:attachment ri:filename="atlassian_logo.gif" />
<ac:plain-text-link-body>
 <![CDATA[Link to a Confluence Attachment]]>
</ac:plain-text-link-body>
</ac:link>

Link to an attachment

Link to an external site

[Atlassian|http://www.atlassian.com/]

<a href="http://www.atlassian.com">Atlassian</a>

Atlassian

Anchor link (same page)

[Anchor Link|#anchor]

<ac:link ac:anchor="anchor">
  <ac:plain-text-link-body>
    <![CDATA[Anchor Link]]>
  </ac:plain-text-link-body>
</ac:link>

Anchor Link

Anchor link (another page)

[Anchor Link|pagetitle#anchor]

<ac:link ac:anchor="anchor">
  <ri:page ri:content-title="pagetitle"/>
  <ac:plain-text-link-body>
    <![CDATA[Anchor Link]]>
  </ac:plain-text-link-body>
</ac:link>

Anchor Link

Link with an embedded image for the body

[!google.png!|pagetitle#anchor]

<ac:link ac:anchor="Anchor Link">
  <ac:link-body>
	<ac:image><ri:url ri:value="http://confluence.atlassian.com/images/logo/confluence_48_trans.png" /></ac:image>
  </ac:link-body>
</ac:link>

For rich content like images, you need to use ac:link-body to wrap the contents.

A note about link bodies

All links received from the editor will be stored as plain text by default, unless they are detected to contain the limited set of mark up that we allow in link bodies. Here are some examples of markup we support in link bodies.

<ac:link>
  <!-- Any resource identifier --> 
  <ri:page ri:content-title="Home" ri:space-key="SANDBOX" /> 
  <ac:link-body>Some <strong>Rich</strong> Text</ac:link-body>
</ac:link>
<ac:link>
  <ri:page ri:content-title="Plugin developer tutorial stuff" ri:space-key="TECHWRITING" />
  <ac:plain-text-link-body><![CDATA[A plain <text> link body]]></ac:plain-text-link-body>
</ac:link>
<ac:link>
  <ri:page ri:content-title="Plugin developer tutorial stuff" ri:space-key="TECHWRITING" />
  <!-- A link body isn't necessary. Auto-generated from the resource identifier for display. --> 
</ac:link>

The markup tags permitted within the <ac:link-body> are , , , , <code>, <tt>, , , and .

Images

Format type

In Confluence 3.5 and earlier

In Confluence 4.0 and later

What you will get

Attached image

!atlassian_logo.gif!

<ac:image>
<ri:attachment ri:filename="atlassian_logo.gif" />
</ac:image>

External image

!http://confluence.atlassian.com/images/logo/confluence_48_trans.png!

<ac:image>
<ri:url ri:value="http://confluence.atlassian.com/images/logo/confluence_48_trans.png" /></ac:image>

Supported image attributes (some of these attributes mirror the equivalent HTML 4 IMG element):

Name	Description
ac:align	image alignment
ac:border	Set to "true" to set a border
ac:class	css class attribute.
ac:title	image tool tip.
ac:style	css style
ac:thumbnail	Set to "true" to designate this image as a thumbnail.
ac:alt	alt text
ac:height	image height
ac:width	image width
ac:vspace	the white space on the top and bottom of an image
ac:hspace	the white space on the left and right of an image

Tables

Format type

In Confluence 3.5 and earlier

In Confluence 4.0 and later

What you will get

Two column, two row (top header row)

||Table Heading Cell 1||Table Heading Cell 2||

              |Normal Cell 1|Normal Cell 2|

<table>
<tbody>
  <tr>
    <th>Table Heading Cell 1</th>
    <th>Table Heading Cell 2</th>
  </tr>
  <tr>
    <td>Normal Cell 1</td>
    <td>Normal Cell 2</td>
  </tr>
</tbody>
</table>

Table Heading Cell 1	Table Heading Cell 2
Normal Cell 1	Normal Cell 2

Two column, three rows, 2nd and third with merged cells in first row

N/A

<table>
<tbody>
  <tr>
    <th>Table Heading Cell 1</th>
    <th>Table Heading Cell 2</th>
  </tr>
  <tr>
    <td rowspan="2">Merged Cell</td>
    <td>Normal Cell 1</td>
  </tr>
  <tr>
    <td colspan="1">Normal Cell 2</td>
  </tr>
</tbody>
</table>

Table Heading Cell 1	Table Heading Cell 2
Merged Cell	Normal Cell 1
Merged Cell	Normal Cell 2

Page layouts

Confluence supports page layouts directly, as an alternative to macro-based layouts such as those using the section and column macros. This section documents the storage format XML created when these layouts are used in a page.

Notes:

Page layouts were introduced in Confluence 4.2, and are not available in earlier versions of Confluence.
The word {content} in the layouts below indicates where further XHTML or Confluence storage format block content would be entered, such as  or <table> tags.

Layout Type

In Confluence 4.2 and later

Confluence 5.1 > Confluence Storage Format > two_col_simple.png

Two columns

<div class="contentLayout" data-atlassian-layout="{&quot;name&quot;:&quot;pagelayout-two-simple&quot;,&quot;columns&quot;:[&quot;&quot;,&quot;&quot;]}">
  <div class="columnLayout twoColumns">
      <div class="cell ">
          <div class="innerCell">
              {content}
         </div>
      </div>
      <div class="cell ">
         <div class="innerCell">
            {content}
         </div>
      </div>
   </div>
</div>

Confluence 5.1 > Confluence Storage Format > two_col_simple_left.png

Left sidebar

<div class="contentLayout" data-atlassian-layout="{&quot;name&quot;:&quot;pagelayout-two-simple-left&quot;,&quot;columns&quot;:[&quot;aside&quot;,&quot;large&quot;]}">
  <div class="columnLayout twoColumns">
     <div class="cell aside">
         <div class="innerCell">
             {content}
         </div>
     </div>
     <div class="cell large">
         <div class="innerCell">
             {content}
         </div>
     </div>
  </div>
</div>

Confluence 5.1 > Confluence Storage Format > two_col_simple_right.png

Right sidebar

<div class="contentLayout" data-atlassian-layout="{&quot;name&quot;:&quot;pagelayout-two-simple-right&quot;,&quot;columns&quot;:[&quot;large&quot;,&quot;aside&quot;]}">
  <div class="columnLayout twoColumns">
      <div class="cell large">
          <div class="innerCell">
              {content}
          </div>
      </div>
      <div class="cell aside">
          <div class="innerCell">
              {content}
          </div>
      </div>
  </div>
</div>

Confluence 5.1 > Confluence Storage Format > three_col_simple.png

Three columns

<div class="contentLayout" data-atlassian-layout="{&quot;name&quot;:&quot;pagelayout-three-simple&quot;,&quot;columns&quot;:[&quot;&quot;,&quot;&quot;,&quot;&quot;]}">
  <div class="columnLayout threeColumns">
      <div class="cell ">
          <div class="innerCell">
              {content}
          </div>
      </div>
      <div class="cell ">
          <div class="innerCell">
              {content}
          </div>
      </div>
      <div class="cell">
          <div class="innerCell">
              {content}
          </div>
      </div>
   </div>
</div>

Confluence 5.1 > Confluence Storage Format > two_col.png

Two columns with header and footer

<div class="contentLayout" data-atlassian-layout="{&quot;name&quot;:&quot;pagelayout-two&quot;,&quot;columns&quot;:[&quot;&quot;,&quot;&quot;],&quot;header&quot;:true,&quot;footer&quot;:true}">
  <div class="header">
      <div class="innerCell">
          {content}
      </div>
  </div>
  <div class="columnLayout twoColumns">
     <div class="cell ">
         <div class="innerCell">
             {content}
         </div>
     </div>
     <div class="cell ">
         <div class="innerCell">
             {content}
         </div>
     </div>
  </div>
  <div class="footer">
      <div class="innerCell">
          {content}
      </div>
  </div>
</div>

Confluence 5.1 > Confluence Storage Format > two_col_left.png

Left sidebar with header and footer

<div class="contentLayout" data-atlassian-layout="{&quot;name&quot;:&quot;pagelayout-two-left&quot;,&quot;columns&quot;:[&quot;aside&quot;,&quot;large&quot;],&quot;header&quot;:true,&quot;footer&quot;:true}">
  <div class="header">
      <div class="innerCell">
          {content}
      </div>
  </div>
  <div class="columnLayout twoColumns">
      <div class="cell aside">
          <div class="innerCell">
              {content}
          </div>
      </div>
      <div class="cell large">
          <div class="innerCell">
              {content}
          </div>
      </div>
  </div>
  <div class="footer">
      <div class="innerCell">
         {content}
      </div>
  </div>
</div>

Confluence 5.1 > Confluence Storage Format > two_col_right.png

Right sidebar with header and footer

<div class="contentLayout" data-atlassian-layout="{&quot;name&quot;:&quot;pagelayout-two-right&quot;,&quot;columns&quot;:[&quot;large&quot;,&quot;aside&quot;],&quot;header&quot;:true,&quot;footer&quot;:true}">
  <div class="header">
      <div class="innerCell">
         {content}
      </div>
  </div>
  <div class="columnLayout twoColumns">
      <div class="cell large">
          <div class="innerCell">
              {content}
          </div>
      </div>
      <div class="cell aside">
          <div class="innerCell">
              {content}
          </div>
      </div>
  </div>
  <div class="footer">
      <div class="innerCell">
          {content}
      </div>
  </div>
</div>

Confluence 5.1 > Confluence Storage Format > three_col.png

Three columns with header and footer

<div class="contentLayout" data-atlassian-layout="{&quot;name&quot;:&quot;pagelayout-three&quot;,&quot;columns&quot;:[&quot;&quot;,&quot;&quot;,&quot;&quot;],&quot;header&quot;:true,&quot;footer&quot;:true}">
  <div class="header">
      <div class="innerCell">
          {content}
      </div>
  </div>
  <div class="columnLayout threeColumns">
      <div class="cell ">
          <div class="innerCell">
              {content}
          </div>
      </div>
      <div class="cell ">
          <div class="innerCell">
              {content}
          </div>
      </div>
      <div class="cell">
          <div class="innerCell">
              {content}
          </div>
      </div>
  </div>
  <div class="footer">
      <div class="innerCell">
          {content}
      </div>
  </div>
</div>

Confluence 5.1 > Confluence Storage Format > three_col_sidebars.png

Left and right sidebar with header and footer

<div class="contentLayout" data-atlassian-layout="{&quot;name&quot;:&quot;pagelayout-three-sidebars&quot;,&quot;columns&quot;:[&quot;sidebars&quot;,&quot;large&quot;,&quot;sidebars&quot;],&quot;header&quot;:true,&quot;footer&quot;:true}">
  <div class="header">
      <div class="innerCell">
          {content}
      </div>
  </div>
  <div class="columnLayout threeColumns">
      <div class="cell sidebars">
          <div class="innerCell">
              {content}
          </div>
      </div>
      <div class="cell large">
          <div class="innerCell">
              {content}
          </div>
      </div>
      <div class="cell sidebars">
          <div class="innerCell">
              {content}
          </div>
      </div>
  </div>
  <div class="footer">
      <div class="innerCell">
          {content}
      </div>
  </div>
</div>

Emoticons

Format type

In Confluence 3.5 and earlier

In Confluence 4.0 and later

What you will get

Emoticons

:)

<ac:emoticon ac:name="smile" />

:(

<ac:emoticon ac:name="sad" />

:P

<ac:emoticon ac:name="cheeky" />

:D

<ac:emoticon ac:name="laugh" />

;)

<ac:emoticon ac:name="wink" />

(y)

<ac:emoticon ac:name="thumbs-up" />

(n)

<ac:emoticon ac:name="thumbs-down" />

(i)

<ac:emoticon ac:name="information" />

(/)

<ac:emoticon ac:name="tick" />

(x)

<ac:emoticon ac:name="cross" />

(!)

<ac:emoticon ac:name="warning" />

Resource identifiers

Resource identifiers are used to describe "links" or "references" to resources in the storage format. Examples of resources include pages, blog posts, comments, shortcuts, images and so forth.

Resource

Resource identifier format

Page

<ri:page ri:space-key="FOO" ri:content-title="Test Page"/>

Notes:

ri:space-key: (optional) denotes the space key. This can be omitted to create a relative reference.
ri:content-title: (required) denotes the title of the page.

Blog Post

<ri:blog-post ri:space-key="FOO" ri:content-title="First Post" ri:posting-day="2012/01/30" />

Notes:

ri:space-key: (optional) denotes the space key. This can be omitted to create a relative reference.
ri:content-title: (required) denotes the title of the page.
ri:posting-day: (required) denotes the posting day. The format is YYYY/MM/DD.

Attachment

<ri:attachment ri:filename>
	... resource identifier for the container of the attachment ...
</ri:attachment>

Notes:

ri:filename: (required) denotes the name of the attachment.
the body of the ri:attachment element should be a resource identifier denoting the container of the attachment. This can be omitted to create a relative attachment reference (similar to [foo.png] in wiki markup).

Examples:

<ri:attachment ri:filename="happy.gif" />

<ri:attachment ri:filename="happy.gif">
	<ri:page ri:space-key="TST" ri:content-title="Test Page"/>
</ri:attachment>

URL

<ri:url ri:value="http://example.org/sample.gif"/>

Notes:

ri:value: (required) denotes the actual URL value.

Shortcut

<ri:shortcut ri:key="jira" ri:parameter="ABC-123">

Notes:

ri:key: (required) represents the key of the Confluence shortcut.
ri:parameter: (required) represents the parameter to pass into the Confluence shortcut.
The example above is equivalent to [ABC-123@jira] in wiki markup.

User

<ri:user ri:username="fred"/>

Notes:

ri:username: (required) denotes the name of the user.

Space

<ri:space ri:space-key="TST"/>

Notes:

ri:space-key: (required) denotes the key of the space.

Content Entity

<ri:content-entity ri:content-id="123"/>

Notes:

ri:content-id: (required) denotes the id of the content.

Template variables

This screenshot shows a simple template:

Confluence 5.1 > Confluence Storage Format > Template.png

The template contains the following variables:

Variable name	Type	Values
$MyText	Single-line text
$MyMulti	Multi-line text	Size: `5 x 100`
$MyList	List	List items: `Apples,Pears,Peaches`

The XML export produces the following code for the template:

<at:declarations>
  <at:string at:name="MyText" />
  <at:textarea at:columns="100" at:name="MyMulti" at:rows="5" />
  <at:list at:name="MyList">
    <at:option at:value="Apples" />
    <at:option at:value="Pears" />
    <at:option at:value="Peaches" />
  </at:list>
</at:declarations>

<p>This is Sarah's template</p>
<p>A single-line text variable:&nbsp;<at:var at:name="MyText" /></p>
<p>A multi-line text variable:&nbsp;<at:var at:name="MyMulti" /></p>
<p>A selection list:&nbsp;<at:var at:name="MyList" /></p>
<p>End of page.</p>

Instructional Text

Instructional text allows you to include information on how to fill out a template for an end-user (the person using creating a page from the template). Instructional text will:

automatically clear all instructional text as the user types in a specific text block, and
automatically trigger a @mention prompt for user selection (for 'mention' type instructional text).

Screenshot: Example of instructional text.

Confluence 5.1 > Confluence Storage Format > image2013-3-18 14:39:22.png

<ul>
    <li><ac:placeholder>This is an example of instruction text that will get replaced when a user selects the text and begins typing.</ac:placeholder></li>
</ul>
<ac:task-list>
    <ac:task>
        <ac:task-status>incomplete</ac:task-status>
        <ac:task-body><ac:placeholder ac:type="mention">@mention example. This placeholder will automatically search for a user to mention in the page when the user begins typing.</ac:placeholder></ac:task-body>
    </ac:task>
</ac:task-list>