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
The above Markdown will produce:
This is some normal text. This sentence is in italics. This word is in bold.
Anchor text
This line is what the visitors of your site will see.
This line is the header you wish to link to, separate spaces by dashes.
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.
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
The above Markdown will produce:
First ordered list item
Another item
Unordered sub-list.
Actual numbers don't matter, just that it's a number
Ordered sub-list
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:
The above Markdown will produce:
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.
However, if you have a bullet points or numbers within the first point above, you may notice that the numbering sequence will be restarted.
To fix this, you can use a backslash between the number and period (.) to break the numbering sequence in Markdown. See below:
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
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.
Note to insert <div> tags to ensure that your video renders appropriately. See below.
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
Last updated
