Markdown Cheatsheet

ยท ยท 733 words ยท 4 minute read

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
  1. first item

  2. second

  3. third

    • a submenu item with two 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

[inline link](https://learns7.com)

inline link

[inline link with title](https://learns7.com "all code snippets in one place")

inline link with title

[reference link][lears7 website]

[learns7 website]: https://learns7.com

[reference link][lears7 website]

[relative reference link](../posts)

relative reference link

[number reference link][1]

[1]: https://www.abanoubhanna.com

number reference link

[link the text itself]

[link the text itself]: https://learns7.com

link the text itself

Images in Markdown ๐Ÿ”—

Inline Style ๐Ÿ”—

![alt text of the image](/img/separator.jpg "title shown when hover on image")

alt text of the image

Reference Style ๐Ÿ”—

![alt text][logo]

[logo]: /img/sparator.jpg "title of image"

alt text

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$ |
tablescol 2col 3
item 1something100$
item 2another12$
finalback2$

but you can just create a table like this:

markdown | table | good
--- | --- | ---
you | do not | need
to be | pretty | to create table
markdowntablegood
youdo notneed
to beprettyto 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)
Share: