Markdown cheatsheet

A list of useful guide on formatting your page using Markdown

This is intended as a quick reference and showcase, to aid you as you draft your site's pages. If you're looking for something that isn't covered here, we encourage you to refer to other more comprehensive Markdown guides on the internet. If you still feel you need more assistance, feel free to reach out to us for help through Slack or email.

If you find learning this is too much of a hassle, you can use StackEdit, a free online What You See Is What You Get (WYSIWYG) editor that you can use while you draft your pages.

Text

This is some normal text. 
*This sentence is in italics.* 
This **word** is in bold.

The above Markdown will produce:

This is some normal text. This sentence is in italics. This word is in bold.

Anchor text

[Click here to go to header](#this-is-the-header)
## This is the header

[Click here to go to header] 

This line is what the visitors of your site will see.

(#this-is-the-header)

This line is the header you wish to link to, separate spaces by dashes.

## This is the header

This is the header in markdown.

Make sure to separate the words by dashes instead of space and all of the inputs are in small letters.

Clicking on the text “Click here to go to header” will now lead to the header that is named “This is the header”.

Make sure that the anchor you want to go to uses the markdown heading style and not <h1> tag in HTML

Headers

Headers are the big titles and subtitles on your page. For example, the headers you have seen so far on this page are "Text" and "Headers". Headers come in levels, with a level 1 header (aka H1) the biggest level usually used only for page titles.

# This is a level 1 (H1) header!

## This is a level 2 (H2) header!

### This is a level 3 (H3) header!

#### This is a level 4 (H4) header!

The above Markdown will produce:

This is a level 1 (H1) header!

This is a level 2 (H2) header!

This is a level 3 (H3) header!

This is a level 4 (H4) header!

Lists

1. First ordered list item
2. Another item
  * Unordered sub-list. 
1. Actual numbers don't matter, just that it's a number
  1. Ordered sub-list
4. And another item.

   You can have properly indented paragraphs within list items. Notice the blank line above, and the 3 leading spaces which align the raw Markdown.

* Use asterisks for unordered lists, aka bullet points

The above Markdown will produce:

1. First ordered list item

2. Another item

   • Unordered sub-list.

3. Actual numbers don't matter, just that it's a number

   1. Ordered sub-list

4. And another item.

   You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces which align the raw Markdown.

• Use asterisks for unordered lists, aka bullet points

Links

Links come in several flavours:

[I'm a link within the site](/configuration/navbar/overview/)

[I'm an link to an external site](https://www.google.com)

URLs must be wrapped in angled brackets to turn into links: <http://www.example.com>

The above Markdown will produce:

I'm a link within the site

I'm an link to an external site

URLs must be wrapped in angled brackets to turn into links: http://www.example.com

Numbering items in sequence

Markdown treats all numbers as a numbering sequence when you add a full stop to it.

1.
2.
3.

However, if you have a bullet points or numbers within the first point above, you may notice that the numbering sequence will be restarted.

1.
1.
1.

To fix this, you can use a backslash between the number and period (.) to break the numbering sequence in Markdown. See below:

1\.
- 
- 
2\.
- 
- 
3\.

Images

To place an image in your Markdown file, first upload the image into your /images/ folder. Then use the following Markdown syntax:

Please make sure that you have alt-text on all your images as this will affect the Accesibility Score on WOGAA

![alt text - this is a description of what is in the image for people with visual impairments using screen readers](/images/isomer-logo.svg)

![just like links, you can include titles which appear when hovered](/images/isomer-logo.svg "Isomer Logo")

The above Markdown will produce:

Note that Alt text is not required for Hero Banner, social media sharing image, your site logo.

Alt text on homepage is also specified differently through the field alt: You can find out more on Homepage section

Resizing Image

Although there are markdown and HTML codes to help with resizing images, we generally don't recommend users to use them because the code that you have entered may not display well as intended on different internet devices. So we recommend resizing images manually and then upload them onto your Github repository.

You may choose to use any free tools online but we recommend using PicResize.

Videos

To embed a video on your page, simply copy the iframe code from Youtube or Vimeo after you've uploaded your video, and paste it onto your page.

Example of iframe snipped on Youtube

Note to insert <div> tags to ensure that your video renders appropriately. See below.

<div class="bp-youtube">

<insert iframe snippet here>

</div>

TIP: How to get iFrame code from Youtube?

Step 1. Go to the video on Youtube.

Step 2 Click the Share button

Step 3 Select Embed

Step 4 Copy the code snippet on the right