Overview

In this document, we will go over some of the basics surrounding writing text in the Markdown format.

The Icefloe portal's page editor uses the Markdown format when making pages for your website as a quick and easy way to style your text. Adding headers, making text bold or italic, and creating lists are all incredibly quick and easy.

Knowing how to write Markdown isn't essential, as the page builder will have buttons for all the major functions! But knowing a few Markdown shortcuts can speed up page building if you want to use them.

Basic Syntax#

Here we will look at some of the basic Markdown syntaxes that you will be likely to use on a regular basis.

Headers#

Those familiar with writing in HTML, or writing in popular word processing apps will be familiar with headers. They are pieces of text that help to section off areas of text from each other, usually bigger and bolder than the text around them, and they come in varying sizes. In this particular document, we have already used three different header styles.

Overview at the top of the page is in "Header one" or H1 Basic Syntax is in "Header two" or H2 Headers is in "Header three" or H3

These headers help you find the right section of text that you want.

In Markdown, these headers are denoted with #s, with the number of #s that you use correlating to the type of header you get.

• # will give you an H1
• ## will give you an H2
• ### will give you an H3
• #### will give you an H4
• And so on.

Bear in mind that headers only work if the # is the first character in a text line. You also need to make sure to leave a space between the # and the text you are using for the header.

Bold Text#

The ability to make pieces of text Bold is an easy and flexible way to draw emphasis to important information. You may notice that throughout our support documentation we always make our company name bold when we write it out, to draw a little extra attention to it: Icefloe.

Making text bold in Markdown is very simple! All you need to do is enclose the text you wish to embolden in either two asterisks ** or two underscores __ .

** Bold ** will be Bold (without the spaces) ** Bold ** will also be Bold (without the spaces)

Italic Text#

The ability to italicise text is another important way to draw emphasis to certain words. You may notice that throughout our support documentation we frequently use italics when drawing your attention to specific concepts, such as "Navigate to the Website option in the left-hand navigation bar" or "Icefloe uses Markdown as a formatting language for making your site look amazing".

Making text italic in Markdown is very easy! All you need to do is enclose the text you wish to italicise in either single asterisks * or single underscores _ .

* Italic * will be Italic (without the spaces) _ Italic _ will be Italic (without the spaces)

Line Breaks#

In some cases when typing our your Markdown text you may want to specify lines that should have a linebreak.
You can achieve this by ending the line of text with a double space.

Itemised Lists#

Itemised lists, or bullet point lists as they are more commonly known, are a very common way to list concepts and features on a website. For instance, the Icefloe platform allows you to:

• Create a website
• Import your products from inventory solutions
• Sell directly to your customers online

By organising the information in this way you can lend a greater sense of importance to these ideas.

Creating lists such as this in Markdown is quick and simple: all you need to do is start the line with an asterisk, and follow it with a space. Bear in mind that the list will only work if the line begins with an asterisk and a space, which helps to differentiate the formatting for lists from the formatting for Bold and Italic words.

The list above would be written like this:

* Create a website
* Import your products from inventory solutions
* Sell directly to your customers online

Once a list has been started, hitting the enter key to start a new line will automatically keep the list going. To stop the process, hit the enter key again, or press backspace.

Numbered Lists#

Numbered lists, like itemised lists, are a common way to list things on your website, but work more specifically for things that you wish to display as listed in a particular order. This will likely be most commonly deployed in itineraries. For instance, this is the flow for signing into your Icefloe portal account:

1. Click the Email box and type in your email address
2. Click the Password box and type in your password
3. Click the Sign-in button.

Organising the information in this way displays a clear relationship between the ideas and that they take place in a specific order.

Creating numbered lists in Markdown is an easy process. All you need to do is start the first line of your numbered list with 1. and then a space. Once a list has been started, hitting the enter key to start a new line will automatically keep the list going. To stop the process, hit the enter key again, or press backspace.

Text Dividers#

A text divider, also known as a horizontal-rule in some cases, is a small dividing line that can be used to break up one section of text from another within the same heading.

They can be used like above to denote a break between paragraphs that may not have a direct connection but exist within the same topic.

To create a text divider you simply need to type out three asterisks together like this *** or --- in their own separate line.

Block Quotes#

A block quote is a section of text, typically a quotation, that is displayed in a way that offsets it from the main body of the text to provide additional clarity and visibility to the quote.

To add a block quote to your text, start the line with a > punctuation mark, and then the text you wish to quote, without a space:

>Using Markdown to create your site’s content is a quick way to create a great looking page without needing to learn more advanced coding languages like HTML.

The resulting quote will look like this:

Using Markdown to create your site's content is a quick way to create a great looking page without needing to learn more advanced coding languages like HTML.

Advanced Syntax#

There are also some more advanced techniques that you are able to achieve with the use of Markdown formatting.

Tables#

Tables are the best way of presenting systematic arrays of data to your customers. As an example, you may want to use them to present the prices of tours across different times:

Prices for our city walking tour

This allows you to clearly show the different prices for this hypothetical city walking tour at different times of the day. Creating tables in Markdown is done using a system of pipes | and dashes - - - to denote the structure of the table. We will give an example of this below:

| | | |
|---|---|---|
| | | |

This will give you a table with two rows and three columns like this:

The empty piped sections are where you place the content for each row and the piped sections with dashes are the borders between cells.

So to input content into your table you would write the Markdown as such:

| one | two | three |
|---|---|---|

Which would give you:

You can increase the number of columns and rows by increasing the number of pipes and dashes you use.

You can also affect the justification of the text within the cells by using colons. By default, the text will be justified to the left, but you can also justify content to the right or in the centre like this:

This content will be justified to the right

Which is written like this:

| one | two | three |
| ---: | ---: | ---: |

This content will be justified to the centre

which is written like this:

| one | two | three |
| :---: | :---: | :---: |

Hyperlinks#

There will be many occasions when you are writing text where you may wish to link to an external resource, or to another page on your own website. Doing so not only provides better navigation around your website for your customers, but also helps to improve your site’s SEO ranking, so it is a good practice to get into.

Writing hyperlinks in markdown consists of two sections: the display text, and the destination URL. These are written into two sets of brackets: square brackets [ ], and then standard parenthesis ( ), which when used together create the link.

For example, this link to our homepage Icefloe.travel is written as [Icefloe.travel](www.icefloe.travel), which creates the link.

Note that there should be no space between the two sets of brackets.

Images#

While Markdown has a primary role of being a text editing tool, it can also be used to add images into your text.

The image above is a lovely picture of the author of these support documents!

Adding images to text is similar to adding hyperlinks, but the markdown is slightly different. You still use the parenthesis and the square brackets as with hyperlinks, but you add an exclamation point to the beginning:


In this case what goes into the Square brackets is the Alt Text for the picture, and what goes into the parenthesis is the link to the image.

What is “Alt text”? 'Alt text' is a contraction of 'alternative text'. It's a short written description of an image, which makes sense of that image when it can't be viewed for some reason. Well-written alt text is important to your website's accessibility, as this is the text that screen readers will use to describe the image, and its search engine optimisation (SEO).

Temporarily Stopping Markdown Formatting#

There will be some situations in which you may want to use an asterisk in your text but want to be able to do so without then causing the rest of the following text to become italicised.

For instance you may want to write the following:

80% of all people who sign up for the Icefloe portal see an increase in their *sales

* But only if they read through the amazing support documentation!

The problem with the above text would be that the asterisk before "sales" would normally cause it to then become italic and the second asterisk would cause the line that follows it to display as a bullet point list.

You can resolve this by typing a backslash - \ - before the asterisk, which tells the Markdown editor that the next piece of formatting should be ignored, and thus the asterisk displays as it normally would.