Markdown Cheat Sheet

What is markdown?

Markdown is a markup language used to convert plain text format syntax to various other formats including HTML. This format is often used in readme documentation files (using the .md extension) or even online discussion forums. The primary goal of markdown is to allow the text to be as readable as possible in plain text syntax without the addition of tags and other formatting tags.

The following markdown cheat sheet provides an overview of the formatting rules available for writing plain text with markdown syntax.

Headers

Markdown header sizes are defined by the number of # characters placed before the text. Therefore, an <h1> tag corresponds to # while <h6> corresponds to ######.

Markdown syntax

# H1
## H2
### H3
#### H4
##### H5
###### H6

HTML equivalent

<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>

Browser view

H1

H2

H3

H4

H5

H6

Italics, bold, and strikethrough

There are a couple of different ways to achieve both italics and bold text styles in markdown.

Markdown syntax

• To style text with italics, this can be achieved either by using *sometext* or \_sometext\_.
• To style text with bold, this can be achieved either by using \**sometext\** or __sometext__.
• To use a strikethrough, this can be achieved by using ~~sometext~~.

HTML equivalent

<em>sometext</em>
<strong>sometext</strong>
<del>sometext</del>

Browser view

• sometext
• sometext
• sometext

Lists

Creating lists in markdown is very easy. The following will go through the creation of both ordered and unordered lists.

Ordered list

Markdown syntax

1. First ordered list item
2. Second ordered list item
3. Third ordered list item

HTML equivalent

<ol>
    <li>First ordered list item</li>
    <li>Second ordered list item</li>
    <li>Third ordered list item</li>
</ol>

Browser view

1. First ordered list item
2. Second ordered list item
3. Third ordered list item

Unordered list

There are a few bullet point options for unordered lists when using markdown. This can be achieved by using *, -, or +.

Markdown syntax

* First unordered list item
* Second unordered list item
    * First subunordered list item
    * Second subunordered list item
* Third unordered list item

HTML equivalent

<ul>
    <li>First unordered list item</li>
    <li>Second unordered list item
        <ul>
            <li>First subunordered list item</li>
            <li>Second subunordered list item</li>
        </ul>
    </li>
    <li>Third unordered list item</li>
</ul>

Browser view

• First unordered list item
• Second unordered list item
  • First subunordered list item
  • Second subunordered list item
• Third unordered list item

Code

Inline code as well as code blocks can be represented using the following methods.

Markdown syntax

• Inline code is defined by using back ticks such as `code example`.
• For multiple lines of code, three back ticks can be used. ```code example```.
• Code can also be indented by four spaces.

HTML equivalent

• Inline code

  <code>code example</code>
  

• Code block

  <pre>
      <code>
          code example 1
          code example 2
          code example 3
      </code>
  </pre>
  

Browser view

• Inline code: code example

• Code block

  code example 1
  code example 2
  code example 3
  

Links

There are a few options available when linking in markdown. However, a basic link accompanied by a title can be defined with the following.

Markdown syntax

[KeyCDN](https://www.keycdn.com "KeyCDN")

HTML equivalent

<a href="https://www.keycdn.com" title="KeyCDN">KeyCDN</a>

Browser view

KeyCDN

Images

The markdown syntax for images is quite similar to that of links with the difference being that images begin with a exclamation point.

Markdown syntax

![logo](https://logos.keycdn.com/keycdn-logo.svg "KeyCDN logo")

HTML equivalent

<img src="https://logos.keycdn.com/keycdn-logo.svg" alt="logo" title="KeyCDN logo">

Browser view

Tables

Tables are created with markdown syntax by using pipes and dashes. Dashes separate the header section from the other cells and pipes separate the columns.

Markdown syntax

| Header 1 | Header 2 | Header 3 |
|----------|----------|----------|
| Cell 1A  | Cell 1B  | Cell 1C  |
| Cell 2A  | Cell 2B  | Cell 2C  |

HTML equivalent

<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Cell 1A</td>
            <td>Cell 1B</td>
            <td>Cell 1C</td>
        </tr>
        <tr>
            <td>Cell 2A</td>
            <td>Cell 2B</td>
            <td>Cell 2C</td>
        </tr>
    </tbody>
</table>

Browser view

This markdown cheat sheet aims to give a broad overview of what's possible with markdown formatting. If you're creating a markdown file and want to see the HTML preview in real time, use a tool such as Dillinger, which allows you to preview your changes and export the file in various formats when done editing.