# Markdown cheatsheet 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](https://stackedit.io/app), 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. \ \&#xNAN;*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**”. ![](https://13808351-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MAS5zzRwr-f8BQR34DD%2F-MQS9sW83r572MKS6lNB%2F-MQXT9R2OBV4a-QcXN6H%2Fimage.png?alt=media\&token=99e389c4-fe6f-411d-b031-a857a49ee43b) {% hint style="info" %} Make sure that the anchor you want to go to uses the markdown heading style and not \

tag in HTML {% endhint %} #### 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: ``` The above Markdown will produce: [I'm a link within the site](https://app.gitbook.com/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: ## 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](https://app.gitbook.com/github-repository/uploading-a-file/) into your `/images/` folder. Then use the following Markdown syntax: {% hint style="danger" %} Please make sure that you have **alt-text** on all your images as this will affect the Accesibility Score on WOGAA {% endhint %} ``` ![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: ![](https://13808351-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MAS5zzRwr-f8BQR34DD%2F-MJZe8FjWBK4Cj2hbBTC%2F-MJZexq6fQOEMF6knjE1%2Fsample-image.jpg?alt=media\&token=3b2a2c4f-f69b-4267-978b-4549498fd78f) ![](https://13808351-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MAS5zzRwr-f8BQR34DD%2F-MJZe8FjWBK4Cj2hbBTC%2F-MJZexq6fQOEMF6knjE1%2Fsample-image.jpg?alt=media\&token=3b2a2c4f-f69b-4267-978b-4549498fd78f) {% hint style="info" %} 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](https://v2.isomer.gov.sg/configurations/homepage) section {% endhint %} #### 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](https://picresize.com/). #### 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](https://13808351-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MAS5zzRwr-f8BQR34DD%2F-MJZe8FjWBK4Cj2hbBTC%2F-MJZfCE9fO7FrALJVrKa%2Fvideo.png?alt=media\&token=d3ff76e1-8594-4847-8735-be112cd4f5e3) {% hint style="info" %} Note to insert `
` tags to ensure that your video renders appropriately. See below. {% endhint %} ```
``` ### **TIP: How to get iFrame code from Youtube?** **Step 1.** Go to the video on Youtube. **Step 2** Click the Share button ![](https://13808351-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MAS5zzRwr-f8BQR34DD%2F-MP54eROe9NJpoaK_97F%2F-MP5JOwU_W6xC2NbsWN9%2FScreenshot%202020-12-22%20at%201.16.32%20AM.png?alt=media\&token=43c4caf5-811c-4a1c-908f-a5bb2ab1b3b6) **Step 3** Select Embed ![](https://13808351-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MAS5zzRwr-f8BQR34DD%2F-MP54eROe9NJpoaK_97F%2F-MP5JI01y8i4SaOS0lps%2FScreenshot%202020-12-22%20at%201.16.51%20AM.png?alt=media\&token=1f82f673-27aa-429c-ad79-61097846f336) **Step 4** Copy the code snippet on the right ![](https://13808351-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MAS5zzRwr-f8BQR34DD%2F-MP54eROe9NJpoaK_97F%2F-MP5JYpKV9s90U0Oi85D%2FScreenshot%202020-12-22%20at%201.17.03%20AM.png?alt=media\&token=84b64a79-c783-478c-852f-baca2b81dcee)