---
# System prepended metadata

title: MarkDown

---

# MarkDown
MarkDown是一種標記語言，只提供必要的功能，理念上不希望使用太花巧的 CSS 寫文檔。  
MarkDown可以被轉譯為HTML。也可轉譯成pdf等文檔。  

# __標題__

以\# (有一個空格)開頭的文字將成為標題，如上面 MarkDown筆記 標題般顯示。  
\#可以疊加多個以得到小標題，最多六個如下：  

`# MarkDown筆記` 這是產生本文標題的代碼。  
## 兩個\# 的小標題，等于HTML 的 H2
### 三個\# 的小標題，等于HTML 的 H3
#### 四個\# 的小標題，等于HTML 的 H4
##### 五個\# 的小標題，等于HTML 的 H5
###### 六個\# 的小標題，等于HTML 的 H6
還有一種寫法可以得到 H1 和 H2 的效果，為避免造成混亂便不提及，有興趣可以參考[中文文件](http://xianbai.me/learn-md)。  
___

# __內容__
## 字體
連續兩個空格加上回車可以換行  
`*斜體* or _斜體_`  = _斜體_  
`**加粗** or __加粗__` = __加粗__  
`**_斜體加粗體_**` = **_斜體加粗_**  
`~~刪除~~` = ~~刪除~~

## __列表__

```
* 第一列
* 第二列
   - 巢狀
      * 第二層
         + 第三層
1. 有序列表
2. 第二列
   1. 巢狀
   2. 第二列
3. 第三列
   * 無序
4. 第四列
```
* 第一列
* 第二列
   - 巢狀
      * 第二層
         + 第三層
1. 有序列表
2. 第二列
   1. 巢狀
   2. 第二列
3. 第三列
   * 無序
4. 第四列
## 引用

> 引用文字的效果  
> 使用 `> `後加上內容  
> ![google的logo](https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png "google")  
> 也可以加入圖片

## 跳脫字元 

MarkDown 使用 \\ 作為跳脫字元，當想輸出\# 時在\# 前加上一個 \\ 就可以輸出\#。  
跳脫字元可以幫助輸出以下字元：  
```
\   反斜線
`   反引號
*   星號
_   底線
{}  大括號
[]  方括號
()  括號
#   井字號
+   加號
-   減號
.   英文句點
!   驚嘆號
```
## 連結
`<http://example.com/>` = <http://google.com/>  
`<address@example.com>` = <address@example.com>  
`[顯示文字](url "提示")` = [顯示文字](url "提示")  
註意是 url 不是 "url"，提示是滑鼠移到目標上滑鼠旁出現的小文字，可以不加提示。
## 跳轉
可以使用連結達到[目錄](#目錄)的跳轉效果。`[顯示文字](#目標)`目標只能是以 \# 開頭的標題。

## 表格
|   這一列居左 |   這一列居中   | 這一列居右  |
| :-----  | :-------: |  -----: |
|  Hello |     Mark  |  Down  |
|表格|默認|居左|  
以下是產生上面表格的程式碼
```
|  這一列居左 |  這一列居中  | 這一列居右 |
|  :-------- | :---------: |  -------: |
|  Hello     |       Mark  |     Down  | 
|  表格      |默認         |居左       |
```
## 分格線
第一行是表頭，第二行調整居左居中居右，:--- 是居左、:---:是居中、 ---: 是居右。  
下面的分格線是使用 `___` 三個底線產生的。
___
# __程式碼__

使用 \` \` 可以包著單句的程式碼。  
\`printf()\` = `printf()`  
多行程式碼  
\`\`\` (語言類型)  
(程式碼內容)  
\`\`\`  
``` c
#include <stdio.h>
int main(){
   return 0;
}
```
MarkDown 會以第一行\`\`\` 後指定的語言進行高亮顯行。主流程式語言都支援。
___

# __圖片__

![google的logo](https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png "google")  
```
![替代文字](url "顯示文字")
```  
替代文字是找不到圖片時顯示的文字，url 是圖片的網址或本地位址，註意url不是"url"，顯示文字是滑鼠移到圖片上時滑鼠旁出現的文字。  
___
# __內嵌HTML__
MarkDown可以內嵌HTML，因為 MarkDown 最後會被翻譯成 HTML 所以理論上可以使用所有HTML的語法。使用時直接`<div></div>`就可以。
___
# mermaid
maermail是markdown的畫圖工具。可以直接產生流程圖等圖示。  
\`\`\`mermaid  
代碼  
\`\`\`  
便可生成mermaid代碼所描述的圖。  
## 方向
### 上到下
```
graph TD
    Start --> Stop
```
```mermaid
graph TD
    Start --> Stop
```
### 下到上
```
graph BT
    Start --> Stop
```
```mermaid
graph BT
    Start --> Stop
```
### 左到右
```
graph LR
    Start --> Stop
```
```mermaid
graph LR
    Start --> Stop
```
### 下到上
```
graph RL
    Start --> Stop
```
```mermaid
graph RL
    Start --> Stop
```

## 節點
```
graph LR
    A[正方形]
    B{text}
    C(圓邊)
    D((圓形))
    E>旗形]
    F[/梯形\]
    H[\梯形/]
```
```mermaid
graph LR
    A[正方形]
    B{text}
    C(圓邊)
    D((圓形))
    E>旗形]
    F[/梯形\]
    H[\梯形/]
```

## 箭頭
```
graph LR
    A-->B
    C---D
    E-- This is the text ---F
    H---|This is the text|I
    J-->|text|K
    L-- text -->N
    M-.->O;
    P-. text .-> Q
    R ==> S
    T == text ==> U
```
```mermaid
graph LR
    A-->B
    C---D
    E-- This is the text ---F
    H---|This is the text|I
    J-->|text|K
    L-- text -->N
    M-.->O;
    P-. text .-> Q
    R ==> S
    T == text ==> U
```

## 子圖
```
graph TB
    c1-->a2
    subgraph one
        a1-->a2
    end
    subgraph two
        b1-->b2
    end
    subgraph three
        c1-->c2
    end
```
```mermaid
graph TB
    c1-->a2
    subgraph one
        a1-->a2
    end
    subgraph two
        b1-->b2
    end
    subgraph three
        c1-->c2
    end
```
```mermaid
graph TB
    c1-->a2
    subgraph one
        a1-->a2
        subgraph free
            q --> a1
        end
    end
    subgraph two
        b1-->b2
    end
    subgraph three
        c1-->c2
    end
```

## 順序圖
```
sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
```
```mermaid
sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
```
### 宣告
```
sequenceDiagram
    participant John
    participant Alice
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
```
```mermaid
sequenceDiagram
    participant John
    participant Alice
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
```
### 取名
```
sequenceDiagram
    participant A as Alice
    participant J as John
    A->>J: Hello John, how are you?
    J->>A: Great!
```
```mermaid
sequenceDiagram
    participant A as Alice
    participant J as John
    A->>J: Hello John, how are you?
    J->>A: Great!
```


### 持續
`activate`會開啓一個方块直到`deactivate`。另一個寫法是在接受方前加`+`作為開始結速時加`-`。
```
sequenceDiagram
    Alice->>John: Hello John, how are you?
    activate John
    John-->>Alice: Great!
    deactivate John
    John->>+Alice: 10 + 20?
    Alice-->>John: processing
    Alice->>-John: 30
```
```mermaid
sequenceDiagram
    Alice->>John: Hello John, how are you?
    activate John
    John-->>Alice: Great!
    deactivate John
    John->>+Alice: 10 + 20?
    Alice-->>John: processing
    Alice->>-John: 30
```
```mermaid
sequenceDiagram
    Alice->>+John: Hello John, how are you?
    John-->>Alice: Great!
    John-->>-Alice: Great!
```

```
sequenceDiagram
    Alice->>+John: Hello John, how are you?
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    John-->>-Alice: I feel great!
```
```mermaid
sequenceDiagram
    Alice->>+John: Hello John, how are you?
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    John-->>-Alice: I feel great!
```
```
sequenceDiagram
    participant John
    Note right of John: Text in note
```
### 块
```
sequenceDiagram
    participant A as John
    participant B as Alice
    participant C as Joe
    Note left of A: Text in note
    Note right of B: Text in note
    Note over A,B:a Note over two
    Note over B,C:a Note over two
    loop Every minute
        A-->C: Great
    end
    alt is sick
        A->>B: Not so good :(
    else is well
        B->>C: Feeling fresh like a daisy
    opt Extra response
        B->>A: Thanks for asking
    end
    end
```
 

## Class
```mermaid
classDiagram
    class Test
    Test <-- Car
    class Animal
```

# graphviz
``` graphviz
graph {
    a -- b;
    b -- c;
    a -- c;
    d -- c;
    e -- c;
    e -- a;
  }
  
  digraph graph_name{
    bgcolor="transparent";//背景透明

    subgraph cluster_subgraph_name{//聚集子图
        node[shape=box];
        cluster_A -> cluster_B;
    }

    subgraph subgraph_name{//子图
        node[shape=none];
        sub_A -> sub_B;
    }

    {//匿名子图
        node[shape=octagon];
        nest_A -> nest_B;
    }

    global_A -> global_B;

    cluster_B -> global_B;
    sub_B -> global_B;
    nest_B -> global_B;
}
```
