Using Markdown

Our system takes in Markdown files (with file extension .md) and converts them into elegant webpages. Here are some tips to orientate you with Markdown.

Formatting your Text

Creating Headers

Headers come in different types, from the largest h1 size to the moderate h4 size. Create headers by adding the # symbol at the front of your text.

# This is the largest h1 header!
## This is the very large h2 header!
### This is the large h3 header!
#### This is the moderate h4 header!

Try it out!

Styling Text

You can add a variety of styles to your text for emphasis or clarity. These include bold, italics and footers.

**Bold** and *italicize* your text like this.

Add footers easily! [^1]
[^1]: Your footer here.

Try it out!

Indentations

Use the > symbol at the start of your text to indent it for formatting purposes.

> This is an indented text!

Try it out!

Organising your Content

Using Lists

As its name suggests, a list is used to display a collection of items. There are two kinds of lists - bullet lists and number lists.

This is a bullet list:
 - Item 1
 - Item 2
   - Item 2.1
   - Item 2.2

This is a number list:
1. Item A
2. Item B

Try it out!

Using Tables

Tables are used to organise information in a clear, easy-to-read manner. Here’s how to add one to your webpage.

Visit the HTML Table Generator and select File > New Table. Once the table is created, double-click a cell to add in data. Then click the Generate button and copy the generated code to your Markdown file.

Adding Media Enhancements

Adding Images (jpg, png and gif)

As they say, a picture speaks a thousand words. To add a image, you need both the image filepath, and an alternative text if the image fails to show up.

![Alternative text if image doesn't load](/assets/govtech-logo.gif)

Try it out!

Adding Videos (YouTube)

Videos are a good platform to bring across content effectively to viewers. You can add YouTube videos by simply following these steps:

1. Click on “Share” button at the bottom of the video.
2. Click on “Embed”.
3. Copy the code <iframe…> </iframe>.
4. Paste it between the <div class=”opendoc-video”> and </div> tags in the following example.

<div class="opendoc-video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/BBcR4KGDdL0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>

Try it out!

Adding Links

Sometimes, it may be important to direct your user to another website using a hyperlink. Two types of links are covered here, namely URL links and email links.

[This](https://www.tech.gov.sg/) links to GovTech!
Send an email to <email@something.com>!

Try it out!

Adding Documents

Finally, you may wish to attach supplementary documents on your webpage to allow users to download them. These can be word documents, pdf files or excel spreadsheets.

Download the <a href="/files/digital-govt-blueprint.pdf" download>Digital Government Blueprint (Summary)</a> here!

Try it out!