Markdown Syntax Cheatsheet

Most people using Bitbucket/Github will already know of the Markdown syntax when creating the repository README.md file. But recently I chose to use it as my default syntax for editing CMS content. So here is a list of some of the basics for learning and reference.

NOTE: I am not going to show how to do tables since in my opinion it's very limited and can be very tricky... but it can be done!

 Basic Example

So if you are completely new to Markdown here is a basic example showing the comparison between html and its syntax equivalent.

<!-- html style -->
<b>bold</b>

<!-- html emphasis -->
<strong>bold</strong>

<!-- markdown -->
**bold**

 Headers

<!-- html default -->
<h1>h1 tag</h1>
<h2>h2 tag</h2>
<h3>h3 tag</h3>
<h4>h4 tag</h4>
<h5>h5 tag</h5>
<h6>h6 tag</h6>

<!-- markdown -->
# h1 tag
## h2 tag
### h3 tag
#### h4 tag
##### h5 tag
###### h6 tag

h1 tag

h2 tag

h3 tag

h4 tag

h5 tag

h6 tag

 Emphasis

<!-- html style -->
<b>bold</b>

<!-- html emphasis -->
<strong>bold</strong>

<!-- markdown -->
Strong = **bold asterisks** or __bold underscores__

Strong = bold asterisks or bold underscores

<!-- html style -->
<i>italics</i>

<!-- html emphasis -->
<em>italics</em>

<!-- markdown -->
Italics = *italic asterisks* or _italic underscores_

Italics = italic asterisks or italic underscores

<!-- html4 (not supported in html5)-->
<strike>strikethrough</strike>

<!-- html5 -->
<del>strikethrough</del> or <s>strikethrough</s> 

<!-- markdown -->
Strikethrough = ~~Strikethrough this~~

Strikethrough = Strikethrough this

These can also be combined like below.

<!-- html default -->
Combined <strong>bold and <del><em>italic</em> strikethrough</del></strong>

<!-- markdown -->
Combined **bold and ~~_italic_ strikethrough~~**

Combined bold and italic strikethrough

 Blockquotes

<!-- html default -->
<blockquote>This is a blockquote used to highlight such things as statements or previous content</blockquote>

<!-- markdown -->
> This is a blockquote used to highlight such things as statements or previous content

This is a blockquote used to highlight such things as statements or previous content

 Lists

Unordered

<!-- html default -->
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4
        <ul>
            <li>Sub Item 4a</li>
            <li>Sub Item 4b</li>
        </ul>
    </li>
</ul>

<!-- markdown -->
* Item 1
* Item 2
* Item 3
* Item 4
  * Sub Item 4a 
  * Sub Item 4b

• Item 1
• Item 2
• Item 3
• Item 4
  • Item 4a
  • Item 4b

Ordered

<!-- html default -->
<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4
        <ol>
            <li>Sub Item 4a</li>
            <li>Sub Item 4b</li>
        </ol>
    </li>
</ol>

<!-- markdown -->
1. Item 1 
2. Item 2 
3. Item 3
4. Item 4 
   1. Sub Item 4a 
   2. Sub Item 4b

1. Item 1
2. Item 2
3. Item 3
4. Item 4
   1. Sub Item 4a
   2. Sub Item 4b

These can also be combined like below.

<!-- html default -->
<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4
        <ul>
            <li>Sub Item 4a</li>
            <li>Sub Item 4b</li>
        </ul>
    </li>
</ol>

<!-- markdown -->
1. Item 1 
2. Item 2 
3. Item 3
4. Item 4 
   * Sub Item 4a 
   * Sub Item 4b

1. Item 1
2. Item 2
3. Item 3
4. Item 4
   • Sub Item 4a
   • Sub Item 4b

 Horizontal Rule

<!-- html default -->
<hr /> or <hr>

<!-- markdown -->
---

 Links

<!-- html default -->
<a href="https://grafxflow.com">The link to press</a>

<!-- markdown - Format: ![Alt Text](image url) -->
[The link to press](https://grafxflow.co.uk)

[The link to press with title](https://grafxflow.co.uk "Link Title")

<!-- NOTE: _target isn't possible to use -->

The link to press

The link to press with title

 Images

<!-- html default -->
<img src="/media/images/logo.jpg" alt="Alt Text">

<!-- markdown - Format: ![Alt Text](image url) -->
![Alt Text](/media/images/logo.jpg)

 Code and Syntax Highlighting

```
<?php
    echo 'hello world';
?>
```

Will output...

<?php
    echo 'hello world';
?>

I hope this has been helpful.