Text Styles | Alt Text Editor

The CommonMark markdown spec does not provide elements for decorating text with colors, sizes, or other common effects. The Confluence editor does provide these capabilities, and so does Alt Text - Markdown and Source Editor by way of a built-in style directive.

Examples

A sentence with a green word. Note that shortcuts like green can be used, as well as RGB codes such as rgb(0, 255, 0)

The word :style[tree]{color=green} will be green.

The word <span style="color: green;">tree</span> will be green.

A sentence with an underlined phrase

This is :style[important]{.underline} content!

This is <u>important</u> content!

A sentence with big text

:style[Bears]{.big} are very big.

<big>Bears</big> are very big.

A sentence with small text

:style[Frogs]{.small} are usually small.

<small>Frogs</small> are usually small.

A sentence with superscript and subscript text

H:style[2]{.subscript}O is water :style[1]{.superscript}

H<sub>2</sub>O is water <sup>1</sup>

A sentence with several nested text styles

Big, important :style[bears]{.big.underline} near small, green :style[trees]{.small color=rgb(54,179,126)}.

Big, important <big><u>bears</u></big> near small, green <span style="color: rgb(54,179,126);"><small>trees</small></span>.

A sentence with mixed big and italics. This demonstrates using the style directive alongside default markdown elements

The wind whispered :style[*secrets*]{.small}

The wind whispered <em><small>secrets</small></em>

A sentence with strikethrough text. This does not use the style directive, but instead wraps text with ~s

The order was ~canceled~

The order was <del>canceled</del>

The style directive can also be used in a multi-line, block context. They function in the same way, and Alt Text Editor is smart enough to apply styles to the correct sub-elements of Confluence's Storage Format.

A list with each item underlined. Note the <u> tags

:::style{.underline}
* Item 1
* Item 2
:::

<ul>
  <li>
    <p><u>Item 1</u></p>
  </li>
  <li>
    <p><u>Item 2</u></p>
  </li>
</ul>

A block style directive applying blue to multiple paragraphs while the first paragraph is also set to big using an inline style directive

:::style{color=blue}

:style[big blue]{.big}

normal blue

:::

<p><span style="color: blue;"><big>big blue</big></span></p>
<p><span style="color: blue;">normal blue</span></p>