How to use Markdown for quick text styling

4 minute read

Markdown is a quick syntax for adding simple styling for HTML based text. The geeky of you might want to know that was invented by John Gruber and Aaron Swartz in 2004. Their key ideas was to create a quick way of marking text to include styling without adversely affecting the readability of the original text. The less geeky among you will just want to know how to do it.

This is a heading

When working with text components in the editor you may have noticed an information box in the bottom right hand corner called ‘markdown cheat sheet’. This gives the most common applications of markdown syntax for body text – things like applying bold, italic and underscore.

Markdown cheat sheet

To apply the markdown attribute simply type the required syntax along with your text in the text entry area on the right. The editor will interpret the syntax and will automatically apply it in a WYSIWYG manner in HTML preview on the left. Here’s a summary of some of the most common Markdown styling.

Markdown styling examples

Markdown language is quick and easy but if you prefer you can also apply many of the same attributes using the formatting icons.

Text attributes

Headings are a simple example application of markdown language. Multiple levels of heading can be created by adding the ‘#’ (and a space) before the text. # gives a first level heading, ## a second level, ### a third and so on. Main and sub-level headings can also be applied by directly underlining the heading text with ‘===’ or ‘—‘ respectively: essentially the same effect as applying # and ##.  Those familiar with HTML will know that this is the same as applying the open and close heading attributes <h1>Heading</h1> and <h2>Heading</h2>.

The other uses you’ll commonly come across are for headings and bulleted and numbered lists. Bulleted lists are applied by preceding the text with a ‘-‘. Similarly, numbered lists simply by adding the number as 1. 2. etc. Again if you are familiar with HTML you’ll recognise the bullet and ordered list syntax below.

<li>Bullet point</li>
<li>Another bullet point</li>

<li>Numbered point</li>
<li>Another numbered point</li>

Don’t forget, if you also add theme styling (for example your font choice or colour) to things like headings in your global or local section theme, these will automatically be applied each time that a Markdown text attribute is recognised. For example, to change the colour of a second level heading using the theme…

Editing the theme

Select the font colour

Themed heading

Anyway, have a play with the markdown styles when adding text into your components. It’s easy to do and you can instantly see the effect it’s having in the preview pane. There’s lots more information online on Markdown but this quick summary should give you the basics you need to know for most email applications.