Markdown is a text-to-HTML conversion tool for web writers. Markdown allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid XHTML (or HTML).



Title

1
# Title
1
2
Title
=
1
2
Title
====

Sub-title

1
## Sub-title
1
2
Sub-title
-
1
2
Sub-title
--------

Sub-sub-title

1
### Sub-sub-title

Sub-sub-sub-title

1
#### Sub-sub-sub-title
Sub-sub-sub-sub-title
1
##### Sub-sub-sub-sub-title
Sub-sub-sub-sub-sub-title
1
###### Sub-sub-sub-sub-sub-title

Notes

  • Title would be set as URL, use [any text](#Title) to jump to another title in the same page.

    • Space in a title would be replaced with -, go to Inline HTML.
    • Title duplicated with the same content would be indexed with number, go to table notes.
1
2
3
* ### Title would be set as URL, use **`[any text](#Title)`** to jump to [another title](#Link) in the same page.
* #### Space in a title would be replaced with `-`, go to [Inline HTML](#Inline-HTML).
* #### Title duplicated with the same content would be indexed with number, go to [table notes](#Notes-2).
  • Title is available in a list or blockquote.

  • Add \ before # to show # if # is at the end of a title like #

1
2
3
* ### Title is available in a [list](#List) or [blockquote](#Blockquote). #
> * #### Only sub-title is available in a blockquote, see [blockquote notes](#Notes-4). #
* ### Add `\` before `#` to show # if `#` is at the end of a title like \#


Highlighting

italic

1
*italic*
1
_italic_

bold

1
**bold**
1
__bold__

strikethrough

1
~~strikethrough~~
1
<del>strikethrough</del>

Examples with some combinations

bold and italic
***bold and italic*** or ___bold and italic___ or
_**bold and italic**_ or *__bold and italic__* or
__*bold and italic*__ or **_bold and italic_**

bold and italic and strikethrough
~~___bold and italic and strikethrough___~~ or
__*~~bold and italic and strikethrough~~*__ or
***~~bold and italic and strikethrough~~***

italic, bold, bold and italic, bold and strikethrough
_italic_, __bold, *bold and italic*, ~~bold and strikethrough~~__



List

Unordered list

  • Use * (or + or -) for bullets.
    • Use tab (two spaces) to make a sub-item.
    • Sub-item
      • Sub-sub-item
        • Sub-sub-sub-item
  • New list
1
2
3
4
5
6
* Use __`*`__ (or __`+`__ or __`-`__) for bullets.
+ Use **tab** (*two spaces*) to make a sub-item.
+ Sub-item
- Sub-sub-item
- Sub-sub-sub-item
* New list

Ordered list (sorting sequence)

  1. Use #. for numbering. (# = integer)

    1. Any number can be used to start an ordered list.
    2. Number of succeeding item is assigned automatically.
    3. Regardless of what number is set even duplicate numbers.
      1. Sub-sub-item with # = 0
      2. Fail to create a sub-sub-sub-item with # = 3.
  2. Succeeding item in the same ordered list with # = 0

    1. Sub-item by ordered list with # = 0
    • Insert an unordered list inside an ordered list.
    1. Sub-item by ordered list with # = 0
  3. Inserting only one blank line results in the same ordered list.

  • Create a new unordered list to start a new ordered list numbering.
    1. New ordered list created with # = 7
  1. Create a new ordered list with # = 8 by inserting two blank lines.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
1. Use **`#.`** for numbering. (**`#`** = integer)
5. Any number can be used to start an ordered list.
5. Number of succeeding item is assigned automatically.
5. Regardless of what number is set even duplicate numbers.
0. Sub-sub-item with # = 0
3. ***Fail*** to create a **sub-sub-sub-item** with # = 3.
0. Succeeding item in the same ordered list with # = 0
0. Sub-item by ordered list with # = 0
* Insert an unordered list inside an ordered list.
0. Sub-item by ordered list with # = 0

8. Inserting only one blank line results in the same ordered list.
* Create a new unordered list to start a new ordered list numbering.
7. New ordered list created with # = 7


8. Create a new ordered list with # = 8 by inserting two blank lines.

Mixed list

  1. Item with # = 0
    • Sub-item
    1. Sub-item with # = 8
    2. No sub-sub-item with # = 0
    • No sub-sub-item
  • Item
    • Sub-item
    1. Sub-item with # = 0
    • No sub-sub-item
    1. No sub-sub-item with # = 7
    2. No sub-sub-item with # = 7

Number of succeeding item in ordered list is still assigned automatically.


Notes

List following text can only be created as

Unordered list

Text

  • Unordered list created.
    • Sub-item

Ordered list with # = 1

Text
0. Failed to create list with # = 0.
7. Sub-item with # = 7
3. Failed to create list with # = 3.
7. Sub-item with # = 7

  1. Ordered list created with # = 1.
    1. Sub-item with # = 7

Or you can insert one blank line before creating a list.

  1. Ordered list created with # = 0.
    1. Sub-item with # = 7

If you want to use - without creating a list, add a \ before -.

  • Here is a list created with -.

- No list created.



Table

Ichkomme ausTaiwan
col 1 isleft-aligneditalic
col 2 iscenteredbold
col 3 isright-alignedcode
leftcenterright
1
2
3
4
5
6
| *Ich*        | komme aus      | ***Taiwan*** |
| ------------ |:--------------:| ------------:|
| col 1 is | left-aligned | *italic* |
| col 2 is | centered | **bold** |
| col 3 is | right-aligned | `code` |
| left | center | right |

More concise writing.

1
2
3
4
5
6
*Ich* | komme aus | ***Taiwan***
- | :-: | -:
col 1 is | left-aligned | *italic*
col 2 is | centered | **bold**
col 3 is | right-aligned | `code`
left | center | right

Notes

  • The first row is always centered.
  • Colon ( : ) is used for alignment.
    • Left :- to align left. (default)
    • Right -: to align right.
    • Both :-: to align center.
  • The outermost vertical bar ( | ) is not absolutely necessary.


New Line

Line1
Hit <Enter> for a new line.
Or append </br> at the end of line.

1
2
3
Line1
Hit <**Enter**> for a new line.
Or append **`</br>`** at the end of line.
1
Line1 </br> Hit <**Enter**> for a new line. </br> Or append **`</br>`** at the end of line.


New Paragraph

Paragraph1

Hit <Enter> twice for a new paragraph.
New line

Or add a new line after appending </br> at the end of line.
New line

1
2
3
4
5
6
7
Paragraph1

Hit <**Enter**> twice for a new paragraph.
New line

Or add a new line after appending **`</br>`** at the end of line.
New line
1
2
3
Paragraph1 </br>
Hit <**Enter**> twice for a new paragraph. </br> New line </br>
Or add a new line after appending **`</br>`** at the end of line. </br> New line

Notes

  • Force more than one blank line by using </br>

New paragraph
New line

1
2
3
4
5
6
* Force more than one blank line by using **`</br>`**

</br>

New paragraph
New line


Horizontal Rule


1
---
1
***
1
___


Blockquote

Here is a blockquote.
- george16886

1
2
> Here is a blockquote.
> \- george16886

Notes

Once using the symbol >, you can continuously do writing and the whole paragraph would be in this blockquote.
Even if you make a new line without >.
Inline Markdown language is available in the blockquote, such as italic, bold, inline code, etc.

However, if you are creating a sub-title, list or horizontal rule, there must be > in the front of the line.

  1. Title (largest) is not allowed in a blockquote.
    1. Blockquote can also be inside a list.

      1. Sub-sub-item

To start a new blockquote, insert one blank line.

To make a blockquote inside a blockquote, use double >.

Once you are in a layer-2 blockquote, you can’t use a layer-1 blockquote.

  • Unless you are using a list.
    • Sub-item

You can also start a layer-n blockquote directly by using n >.

  • Layer-9 blockquote


Block

Here is a block.
Don't worry, be happy!
Be YOURSFLF!
1
2
3
4
<!-- Add four spaces in the fornt of each line -->
Here is a block.
Don't worry, be happy!
Be YOURSFLF!


Code

Inline code

int a = 0;

1
`int a = 0;` 

int `a` = 0;

1
``int `a` = 0;`` 

Code block

1
2
var s = "JavaScript syntax highlighting";
alert(s);
1
2
3
4
``` Javascript 
var s = "JavaScript syntax highlighting";
alert(s);
```

Code block with file name

demo.py
1
2
s = "Python syntax highlighting"
print s
1
2
3
4
``` Python demo.py
s = "Python syntax highlighting"
print s
```

Notes

  • Use ` inline code ` for inline code.
    • If you want to use ` inside code, use two ` for inline code instead of one.
  • Use ``` (language) + (new line) code block + (new line) ``` for code clock.
    • Specify programming language after the starting ```.
      • If no language indicated, no syntax highlighting. And the title of the code block would be “Code”.
    • Do not leave space after the ending ```.


Link

https://george16886.github.io

1
### https://george16886.github.io
1
### [URL link](https://george16886.github.io)
1
### [URL link with title (mouseover text)](https://george16886.github.io "george16886's blog")
1
### [Relative path link](../../../../link)
1
2
3
### [Reference link][george16886's blog]

[george16886's blog]: https://george16886.github.io
1
2
3
### [Reference link using `#`][1]

[1]: https://george16886.github.io
1
2
3
### [Reference link using `#` with title (mouseover text)][2]

[2]: https://george16886.github.io "george16886's blog"
1
2
3
### [Direct reference link]

[Direct reference link]: https://george16886.github.io

Notes

  • Link and reference should be separated with a blank line.


Embedded Image

image_tag

1
![image_tag](https://bit.ly/3aVcEJV "pika cute")

image_tag

1
![image_tag](/uploads/images/friend_404.gif "404 ghost")

image_tag

1
2
3
![image_tag][logo]

[logo]: https://bit.ly/2xceXtv "pika ball"

image_tag

1
2
3
![image_tag][9]

[9]: https://bit.ly/3aVcEJV

alt text

1
[![alt text](/uploads/images/travel.gif "德國鬼的180天交換計畫")](https://medium.com/%E5%BE%B7%E5%9C%8B%E9%AC%BC%E7%9A%84180%E5%A4%A9%E9%A4%8A%E6%88%90%E8%A8%88%E7%95%AB)

Resize image

Resize using HTML

image_tag

1
2
<img src="https://bit.ly/3aVcEJV" 
alt="image_tag" title="pika cute" width="320" height="240">

Resize using HEXO tag plugins

alt text
1
{% img [class names] https://bit.ly/2xceXtv 320 240 '"pika ball" "alt text"' %} 

Notes

  • Adapt the method of link.
  • Animated GIF is supported.


Embedded Youtube Video

image_tag

1
[![image_tag](https://bit.ly/2woblUN)](https://www.youtube.com/watch?v=xRZAHBs8OQI)

Resize using HTML

image_tag

1
2
3
<a href="https://www.youtube.com/watch?feature=player_embedded&v=xRZAHBs8OQI
" target="_blank"><img src="https://bit.ly/2woblUN"
alt="image_tag" width="320" height="240" border="10" ></a>

HEXO tag plugins

1
{% youtube xRZAHBs8OQI %}

Notes



Inline HTML

Example 1

Definition list
Is something people use sometimes.
Markdown in HTML
Does *not* work **very** well. Use HTML tags.
1
2
3
4
5
6
7
<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>

Example 2

  1. Bird
  2. McHale
  3. Parish
1
2
3
4
5
<ol>
<li> Bird </li>
<li> McHale </li>
<li> Parish </li>
</ol>


Text Alignment

Centered
1
<center> Centered </center>

Aligned left

1
<p align = "left"> Aligned left </p>

Aligned right

1
<p align = "right"> Aligned right </p>


Font Color


Green

1
<font color = green> Green </font>

Red

1
<font color = red> Red </font>

Blue

1
<font color = blue> Blue </font>




Font Size


Font size = 3

1
<font size = "3"> Font size = 3 </font>

Font size = 6

1
<font size ="6"> Font size = 6 </font>

​​


Font Face


Arial Black

1
<font face = "Arial Black"> Arial Black </font>

Calibri

1
<font face = "Calibri"> Calibri </font>

Droid Sans Mono

1
<font face = "Droid Sans Mono"> Droid Sans Mono </font>


Comment

Standard HTML tags

1
<!-- comment -->
1
2
<!-- mutli-line
comment -->


GitHub Flavored Markdown

Task list

  1. This is a complete item.
  2. This is an incomplete item.
    • This is an incomplete sub-item.
    • This is a complete sub-item
1
2
3
4
0. [x] This is a complete item.
0. [ ] This is an incomplete item.
* [ ] This is an incomplete sub-item.
* [x] This is a complete sub-item

Notes

  • Links, formatting, tags, @mentions, and #refs, are supported.
  • List syntax is required.