With Markdown you can easily write web content with minimum of HTML knowledge, using "plain text" plus a few other symbols like #, ` and *. As well as modifying font weight, and decoration it's really easy to create ordered and unordered lists, set up headings, insert images and create hyperlinks.

Let's move onto the first topic, modifying text styles.

Headings

Creating a header is as simple as adding a # before the text you want to change into a header. Adding more hashes with make the text smaller and smaller. See the examples below.

Markdown

#Heading 1 (the largest size)

##Heading 2

######Heading 6 (the smallest size)

Output

Heading 1 (the largest size)

Heading 2

Heading 6 (the smallest size)

Bold and Italic

Emphasising text is as easy as surrounding the text with asterisks or underscores.

Markdown

For italic text just surround the text with *asterisks* or _underscores_.

For bold text use double **asterisks** or __underscores__.

You can of course **combine the _two_**.

To strikethrough text, use two tildes. ~~Like this.~~

Output

For italic text just surround the text with asterisks or underscores.

For bold text use double asterisks or underscores.

You can of course combine the two.

To strikethrough text, use two tildes. Like this.

Lists

Creating lists is also very straightforward. For an unordered list start the line with an asterisk, plus or minus. For numbered lists, start the line with the number.

Markdown

1. First ordered list item
2. Second item
    * Unordered sub-list.
    * Unordered sub-list.
    * Unordered sub-list.
1. You do not need to write the correct number for ordered lists,
you can just use 1. for each item.
    1. Ordered sub-list
    1. Ordered sub-list
    1. Ordered sub-list
    1. And another item.
* Unordered list using different symbols
    - Second item
    + Third item

Output

1. First ordered list item

2. Second item

   • Unordered sub-list.
   • Unordered sub-list.
   • Unordered sub-list.

3. You do not need to write the correct number for ordered lists, you can just use 1. for each item.

   1. Ordered sub-list
   2. Ordered sub-list
   3. Ordered sub-list
   4. And another item.

4. Unordered list using different symbols

   • Second item
   • Third item

Links

There are a couple of ways to create links using Markdown. Let's take a look at them all.

Markdown

[Inline link](https://iforwms.com)

[Inline link with title](https://iforwms.com "DBW Homepage")

[Relative link to a file on the server](../cv/CV_Ifor_Waldo_Williams.pdf)

[You can use numbers for reference-style link definitions][1]

Or leave it empty and use [some link text].

Then at the bottom of the page you write your link references.

[1]: https://iforwms.com

[some link text]: https://iforwms.com

Output

Inline link

Inline link with title

Relative link to a file on the server

You can use numbers for reference-style link definitions

Or leave it empty and use some link text.

Then at the bottom of the page you write your link references.

Images Linking images is almost the same as creating links, except we add an extra exclamation mark before any text.

Markdown

![This is the text that appears if the image is not found or the page is viewed with a screen reader.](/icons/icon-144x144.png "This text appears when you hover over the image.")

Output

Blockquotes

Super simple, just use the greater than sign, you can also nest blockquotes.

Markdown

> Here's a blockquote.
>> Here's a nested quote.

Output

Here's a blockquote.

Here's a nested quote.

Tables

You must put at least 3 dashes between below each header. The pipe (|) characters are only rewuired between each heading. Formatting (whitespace) is ignored and the tables will line up properly without. Colons are used to align columns.

Note: tables are not in the official Markdown spec, but is supported by Github-flavoured markdown amonth others.

Markdown

| Heading 1     | Heading 2     | 3     |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned |   ABC |
| col 2 is      | centered      |   123 |
| col 1 is      | default       |    45 |

Badly | Formattted | Markdown
--- | --- | ---
*Still* | `renders` | **nicely**
1 | 2 | 3

Output

Code

Sometimes you don't want the browser to parse HTML tags, you want to actually show the tags. This is useful for displaying programming code for example. You can either inline code using single back ticks, or create a code block either by indenting each line with 4 spaces, or wrapping the code in three backticks.

Markdown

Here is an example of `inline-code`.

<p>For larger block of code indent every line with at least 4 spaces.
That way you can <span>display larger chunk of code</span></p>

function sayMyName ($name) {
    return "Hello $name, how are you?";
}

Output

Here is an example of inline-code.

For larger block of code indent every line with at least 4 spaces. That way you can display larger chunk of code

function sayMyName ($name) {
    return "Hello $name, how are you?";
}

Horizontal lines

To add a horizontal line to your text, perhaps to group together a couple of paraagraphs, you can use three hyphens, asterisks or underscores.

Markdown

---

***

___

Output

Paragraphs and Line breaks

By pressing enter twice you automatically create a new paragraph. For a linebreak, just put two spaces at the end of the line. You may also add a HTML line break by using

Markdown

Here's the first paragraph in a text. Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Cupiditate quas ipsum facilis tempore pariatur
repellendus at laborum nihil suscipit, ab fugit harum eaque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt explicabo
repellendus voluptas aut vel nesciunt nostrum est at, ipsa dicta aperiam, ea
soluta excepturi magnam eius maiores dolores quas expedita obcaecati
repudiandae eveniet quos.
<br><br><br><br>
Above are some extra line breaks.

Output

Here's the first paragraph in a text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate quas ipsum facilis tempore pariatur repellendus at laborum nihil suscipit, ab fugit harum eaque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt explicabo repellendus voluptas aut vel nesciunt nostrum est at, ipsa dicta aperiam, ea soluta excepturi magnam eius maiores dolores quas expedita obcaecati repudiandae eveniet quos.



Above are some extra line breaks.