Yet another markdown quick reference guide
There are lots of markdown quick reference guides out there. I make this just for my personal utilization with annotations and includes some copy’n’paste from other public guides.
This is a live document that I will evolve with contributions that seem to me of interest.
Emphasis
*Emphasize*
_Emphasize_
**Strong**
__Strong__
Emphasize Emphasize Strong Strong
Inline links
A [link](http://example.com "Title")
A link
Referenced links
Some text with [a link][1] and
another [link][2].
[1]: http://example.com/ "Title"
[2]: http://example.org/ "Title"
Some text with a link and another link.
The reference section can be anywhere in the document
Inline Images
Logo: ![Alt](/assets/images/logo.png "Title")
Logo:
The “Alt” text (alternative text) makes images accessible to visually impaired
Referenced images
Logo: ![Alt][3]
[3]: /assets/images/logo.png "Title"
Logo:
Linked images
Linked logo: [![alt text](/assets/images/logo.png)](http://example.com/ "Title")
Footnotes
This is a footnote [^1] example
[^1]: Footnote text
This is a footnote 1 example
Line breaks
This is a first line
This is the second line after the line break
This is a first line
This is the second line after the line break
Bulled lists
* Item
* Item
- Item
- Item
+ Item
+ Item
- Item
- Item
- Item
- Item
- Item
- Item
Numbered lists
1. Item
2. Item
3. Item
- Item
- Item
- Item
Mixed lists
1. Item
2. Item
* Mixed
* Mixed
3. Item
- Item
- Item
- Mixed
- Mixed
- Item
Blockquotes
> Quoted text.
> > Quoted quote.
> * Quoted
> * List
Quoted text.
Quoted quote.
- Quoted
- List
Preformatted
Begin each line with
four spaces or more to
make text look
e x a c t l y
like you type i
t.
Code
`This is code`
~~~~
This is a
piece of code
in a block
~~~~
```
This too
```
This is code
This is a
piece of code
in a block
This too
Syntax hightlighting
```css
#button {
border: none;
}
```
```javascript
var s = "JavaScript syntax highlighting";
alert(s);
```
```python
s = "Python syntax highlighting"
print s
```
#button {
border: none;
}
var s = "JavaScript syntax highlighting";
alert(s);
s = "Python syntax highlighting"
print s
Headers
Header 1
========
Header 2
--------
# Header 1
## Header 2
### Header 3
#### Header 4 ####
##### Header 5 #####
###### Header 6 ######
Definition lists
WordPress
: A semantic personal publishing platform
Markdown
: Text-to-HTML conversion tool
- WordPress
- A semantic personal publishing platform
- Markdown
- Text-to-HTML conversion tool
Tables
Tables aren’t part of the core Markdown spec, but they are part of GFM and Markdown Here supports them. They are an easy way of adding tables to your email – a task that would otherwise require copy-pasting from another application.
| Tables | Are | Cool |
| ------------- |:-------------:| -----:|
| col 3 is | right-aligned | $1600 |
| col 2 is | centered | $12 |
| zebra stripes | are neat | $1 |
Colons can be used to align columns.
Tables | Are | Cool |
---|---|---|
col 3 is | right-aligned | $1600 |
col 2 is | centered | $12 |
zebra stripes | are neat | $1 |
There must be at least 3 dashes separating each header cell. The outer pipes (|) are optional, and you don’t need to make the raw Markdown line up prettily. You can also use inline Markdown.
Markdown | Less | Pretty
--- | --- | ---
*Still* | `renders` | **nicely**
1 | 2 | 3
Markdown | Less | Pretty |
---|---|---|
Still | renders |
nicely |
1 | 2 | 3 |
Inline HTML
You can also use raw HTML in your Markdown, and it’ll mostly work pretty well.
<dl>
<dt>Definition list</dt>
<dd>Is something people use sometimes.</dd>
<dt>Markdown in HTML</dt>
<dd>Does *not* work **very** well. Use HTML <em>tags</em>.</dd>
</dl>
- Definition list
- Is something people use sometimes.
- Markdown in HTML
- Does *not* work **very** well. Use HTML tags.
Horizontal Rule
Three or more...
---
Hyphens
***
Asterisks
___
Underscores
Three or more…
Hyphens
Asterisks
Underscores
Line Breaks
Here's a line for us to start with.
This line is separated from the one above by two newlines, so it will be a *separate paragraph*.
This line is also a separate paragraph, but...
this line is only separated by a single newline, so it's a separate line in the *same paragraph*.
Here’s a line for us to start with.
This line is separated from the one above by two newlines, so it will be a separate paragraph.
This line is also a separate paragraph, but… This line is only separated by a single newline, so it’s a separate line in the same paragraph.
I’m using GFM (GitHub Flavored Markdown) line breaks so there’s no need to use MD’s two-space line breaks.
YouTube videos
You can type
[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg)](http://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE)
but losing the image sizing and border.
It’s better to include it with HTML code
<a href="http://www.youtube.com/watch?feature=player_embedded&v=YOUTUBE_VIDEO_ID_HERE" target="_blank">
<img src="http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg" alt="IMAGE ALT TEXT HERE" width="240" height="180" border="10" />
</a>
More info
Atlassian Markdown syntax guide
Wordpress Markdown quick reference
-
Footnote text ↩