CMS Syntax Examples

This page will supplement the CMS Reference and Tutorial and show some examples of how to do things simply with the CMS syntax.

To see how any particular thing was done, and how the finished product looks, just toggle between Edit and Preview modes.

Modifiers

We will use the term modifier in what follows and by that we just mean the syntax of the markup that you add in Edit mode which results in generation of XHTML when the text is Previewed or Published.

TIP:

• Inline modifiers should have leading and trailing spaces
• Block modifiers (ie, paragraphs, headings) should have trailing space

Other wise you might see __ this__ instead of this, and
p.this… instead of

this…

Sub Headings

This syntax wraps a line inside tags like <h1>, <h2>, <h3>, etc, HTML elements…
h3. Sub Heading

Paragraphs

Paragraph text (<p> HTML elements) will be added around any text that is not otherwise prefixed by a leading element specifier like <h3>, for example. Paragraphs may be explicitly indicated by a leading p. modifier. Paragraphs, and most other elements, are closed by two line breaks.

Note: One thing I find confusing at times is when I use a single linebreak followed by an explicit paragraph, or other marker, which renders like this…
p. which is not what we wanted.

Lists

Lists of items may be formed by adding # or * at the start of a line. The list closes with the next non-list line. For example:

1. We can do numbered lists
   1. And we can create indented, sub-numbered elements
   2. As many as we like
2. And it keeps track of the numbering for us
   • And we can do bulleted and numbered lists mixed!
   • Just like this
3. And still keep track of things

Have a look at the Edit block for this text to see how we made these lists, then look at the Preview to see what it looks like (look at the page source to see the HTML it generates).

• Easy!
• Fast!
• Makes valid XHTML!

Inline Text Formatting

There are many modifiers to add inline text formatting, such as BOLD or italic.

In addition, you may use ANY valid CSS markup inside a <span> element inline or attached to a block element like a paragraph or heading. The CSS must appear inside curly brackets, and you can create a <span> element by simply surrounding any text with % signs.

So, %{color:red; background:green;}looks like this%, looks like this! And note that in general, these modifiers may be nested – just look at the Edit version of this line! (nested ordering can make a difference in some cases, experiment!)

Tables

We can even easily create tables without using any HTML!

Like this…

T1	T2	T3	T4
R1a	R1b	R1c	R1d
R2a	R2b	R2c	R2d