Markdown Cheatsheet
Headers in Markdown ๐
# H1
## H2
### H3
#### H4
##### H5
###### H6
H1 ๐
H2 ๐
H3 ๐
H4 ๐
H5 ๐
H6 ๐
Alternatively, for H1 and H2, an underline-ish style:
Alt-H1
======
Alt-H2
------
Alt-H1 ๐
Alt-H2 ๐
Emphasis ๐
*italic*
_italic too_
__emphasis__
**also called bold**
**_bold italic text_**
~~strikethrough or scratched text~~
italic
italic too
emphasis
also called bold
bold italic text
strikethrough or scratched text
Lists in Markdown ๐
1. first item
2. second
3. third
* a submenu item with 4 spaces
* a second item in the submenu
4. fourth
indented paragraph with 3 spaces.
5. fifth
* you can use asterisk or
- dash or minus or tack
+ plus to create unordered list items
first item
second
third
a submenu item with two spaces
a second item in the submenu
fourth
indented paragraph with 3 spaces.
fifth
you can use asterisk or
dash or minus or tack
plus to create unordered list items
Links in Markdown ๐
[inline link](https://learns7.com)
[inline link with title](https://learns7.com "all code snippets in one place")
[reference link][lears7 website]
[learns7 website]: https://learns7.com
[reference link][lears7 website]
[relative reference link](../posts)
[number reference link][1]
[1]: https://www.abanoubhanna.com
[link the text itself]
[link the text itself]: https://learns7.com
Images in Markdown ๐
Inline Style ๐
![alt text of the image](/img/separator.jpg "title shown when hover on image")
Reference Style ๐
![alt text][logo]
[logo]: /img/sparator.jpg "title of image"
Code and Syntax Highlighting ๐
Code block and inline code are part of the markdown, but the highlighting is not.
You can use highlight.js to highlight your code.
Code Block ๐
use the three back ticks to make a block of code like this:
\`\`\`javascript
var s = "javascript is here";
\`\`\`
and put three other back ticks on the end of the code.
use the three back ticks to make a block of code like this:
var s = "javascript is here";
and put three other back ticks on the end of the code.
Inline Code ๐
use single back tick to show inline code within a paragraph like `this`. It is a great way of talking about some code in the paragraph.
use single back tick to show inline code within a paragraph like this
. It is a great way of talking about some code in the paragraph.
Tables in Markdown ๐
note: colon can be used to align columns
| tables | col 2 | col 3 |
|--------|:-----:|------:|
| item 1 | something | 100$ |
| item 2 | another | 12$ |
| final | back | 2$ |
tables | col 2 | col 3 |
---|---|---|
item 1 | something | 100$ |
item 2 | another | 12$ |
final | back | 2$ |
but you can just create a table like this:
markdown | table | good
--- | --- | ---
you | do not | need
to be | pretty | to create table
markdown | table | good |
---|---|---|
you | do not | need |
to be | pretty | to create table |
Blockquotes in Markdown ๐
> this is a quote statement
> that is written in two lines.
> this is the same thing but written in one long line. but the result is the same.
this is a quote statement that is written in two lines.
this is the same thing but written in one long line. but the result is the same.
Inline HTML ๐
<dl>
<dt>Definition List</dt>
<dd>sometimes people use it.</dd>
</dl>
Horizontal Rule ๐
use three or more of
dashes or hyphens
---
or asterisks
***
or underscores
____
to create `<hr>`
use three or more of dashes or hyphens
or asterisks
or underscores
to create <hr>
Line Breaks ๐
one line here.
another line which is separated as you see.
but this line will be just over the following line.
as you can see here. Got it? OK.
one line here.
another line which is separated as you see.
but this line will be just over the following line. as you can see here. Got it? OK.
YouTube Videos in Markdown ๐
You can not embed YouTube video in Markdown, but you can add an image with a link to the video like this.
<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>
and you can rewrite it in markdown like this.
[![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)