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
- First ordered list item
- Second ordered list item
- 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
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
Header 1 | Header 2 | Header 3 |
---|---|---|
Cell 1A | Cell 1B | Cell 1C |
Cell 2A | Cell 2B | Cell 2C |
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.