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
- First ordered list item
-
Second item
- Unordered sub-list.
- Unordered sub-list.
- Unordered sub-list.
-
You do not need to write the correct number for ordered lists, you can just use 1. for each item.
- Ordered sub-list
- Ordered sub-list
- Ordered sub-list
- And another item.
-
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
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

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
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 |
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.