Markdown Notes || 語法整理

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).

• Check Official website for original John Gruber markup.

---

Title

# Title

Title
=

Title
====

Sub-title

## Sub-title

Sub-title
-

Sub-title
--------

Sub-sub-title

### Sub-sub-title

Sub-sub-sub-title

#### Sub-sub-sub-title

Sub-sub-sub-sub-title

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

Sub-sub-sub-sub-sub-title

###### 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.

* ### 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.

  • Only sub-title is available in a blockquote, see blockquote notes.

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

* ### 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

*italic*

_italic_

bold

**bold**

__bold__

strikethrough

~~strikethrough~~

<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

* 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)

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

2. 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

3. 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.

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

0. Item with # = 0
   • Sub-item
   8. Sub-item with # = 8
   9. No sub-sub-item with # = 0
   • No sub-sub-item

• Item
  • Sub-item
  0. Sub-item with # = 0
  • No sub-sub-item
  7. No sub-sub-item with # = 7
  8. 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.
   7. Sub-item with # = 7

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

0. Ordered list created with # = 0.
   7. 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

Ich	komme aus	Taiwan
col 1 is	left-aligned	italic
col 2 is	centered	bold
col 3 is	right-aligned	code
left	center	right

| *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.

*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.

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

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

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

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

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

</br>

New paragraph
New line

---

Horizontal Rule

---

---

***

___

---

Blockquote

Here is a blockquote.
- george16886

> 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.

0. Title (largest) is not allowed in a blockquote.

   0. Blockquote can also be inside a list.

      0. 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!

<!-- 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;

`int a = 0;` 

int `a` = 0;

``int `a` = 0;`` 

Code block

var s = "JavaScript syntax highlighting";
alert(s);

``` Javascript 
var s = "JavaScript syntax highlighting";
alert(s);
``` 

Code block with file name

demo.py

s = "Python syntax highlighting"
print s

``` 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

Direct link

https://george16886.gitlab.io

### https://george16886.gitlab.io

URL link

### [URL link](https://george16886.gitlab.io)

URL link with title (mouseover text)

### [URL link with title (mouseover text)](https://george16886.gitlab.io "george16886's blog")

Relative path link

### [Relative path link](../../../../link)

Reference link

Reference link

### [Reference link][george16886's blog]

[george16886's blog]: https://george16886.gitlab.io

Reference link using #

### [Reference link using `#`][1]

[1]: https://george16886.gitlab.io

Reference link using # with title (mouseover text)

### [Reference link using `#` with title (mouseover text)][2]

[2]: https://george16886.gitlab.io "george16886's blog"

Direct reference link

### [Direct reference link]

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

Notes

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

---

Embedded Image

Direct link

URL link with title (mouseover text)

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

Relative path link

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

Reference link

Reference link with title (mouseover text)

![image_tag][logo]

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

Reference link using #

![image_tag][9]

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

Image with hyperlink

[![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

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

Resize using HEXO tag plugins

{% 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

Direct link

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

Resize using HTML

<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

{% youtube xRZAHBs8OQI %}

Notes

• Adapt the method of embedded image.
• Replace the youtube video ID.

---

Inline HTML

Example 1

Definition list

Is something people use sometimes.

Markdown in HTML

Does *not* work **very** well. Use HTML tags.

<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

<ol>
  <li> Bird </li>
  <li> McHale </li>
  <li> Parish </li>
</ol>

---

Text Alignment

Centered

<center> Centered </center>

Aligned left

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

Aligned right

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

---

Font Color

​
Green

<font color = green> Green </font>

Red

<font color = red> Red </font>

Blue

<font color = blue> Blue </font>

​

---

​

Font Size

​
Font size = 3

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

Font size = 6

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

​​

---

Font Face

​
Arial Black

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

Calibri

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

Droid Sans Mono

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

---

Comment

Standard HTML tags

<!-- comment -->

<!-- mutli-line
comment -->

---

GitHub Flavored Markdown

Task list

0. This is a complete item.
1. This is an incomplete item.
   • This is an incomplete sub-item.
   • This is a complete sub-item

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.

---

• Category: Notes 技術隨筆
• Original post @george16886’s blog