Markdown

Haroopad（編輯預覽分離）、Typora（實時顯示）是Markdown編輯器。
Typora編輯器支持MacOS 、Windows、Linux平臺，且包含多種主題，編輯後直接渲染出效果，支持導出HTML、PDF、Word、圖片等多種類型文件。
Typora官網：https://typora.io/
菜鳥教程在線編輯器：https://c.runoob.com/front-end/712

Markdown是一種輕量級標記語言，它容許人們使用易讀易寫的純文本格式編寫文檔。
Markdown編寫的文檔能夠導出HTML、Word、圖像、PDF、Epub等多種格式的文檔。
Markdown編寫的文檔後綴爲 .md, .markdown。
應用：撰寫電子書、幫助文檔、論壇消息

Markdown標題:
---
一、使用 = 和 - 標記一級和二級標題
一級標題
===
二級標題
---
二、使用 # 號可表示 1-6 級標題，一級標題對應一個 # 號，二級標題對應兩個 # 號，以此類推。
# Hello World!
###### Hello World!

Markdown字體:
---
*斜體文本*
_斜體文本_
**粗體文本**
__粗體文本__
***粗斜體本文***
___粗斜體本文___

Markdown分隔線
---
能夠在一行中用三個以上的星號、減號、底線來創建一個分隔線，行內不能有其餘東西。可在中間插入空格。

---
***
___

Markdown刪除線
---
~~若是段落上的文字要添加刪除線，只須要在文字的兩端加上兩個波浪線 ~~ 便可~~

Markdown下劃線
---
下劃線能夠經過HTML的u標籤來實現：
<u>下劃線</u>

Markdown腳註
---
建立一個腳註：[^T]
[^T]: 腳註是對文本的補充說明（Haroopad不支持）

Markdown列表
---
Markdown支持有序列表和無序列表。
無序列表使用星號(*)、加號(+)或是減號(-)做爲列表標記，這些標記後面要添加一個空格，而後再填寫內容：
* 第一項
* 第二項

+ 第一項
+ 第二項

- 第一項
- 第二項

有序列表使用數字並加上 . 號來表示：
1.第一項
2.第二項

Markdown列表嵌套
---
列表嵌套只需在子列表中的選項前面添加四個空格便可：
1.第一項
2. 第一項嵌套的第一個元素
3. 第一項嵌套的第二個元素

2.第二項
3. 第二項嵌套的第一個元素
4. 第二項嵌套的第二個元素
1.第二項嵌套的第二個元素的第一個嵌套元素
2.第二項嵌套的第二個元素的第二個嵌套元素
3. 第二項嵌套的第三個元素

Markdown區塊
---
Markdown 區塊引用是在段落開頭使用 > 符號 ，而後後面緊跟一個空格符號：
> 區塊引用
>不用空格也行
>>>>區塊是能夠嵌套的，一個 > 符號是最外層，兩個 > 符號是第一層嵌套，以此類推：

Markdown區塊列表綜合:
---
######1.區塊中使用列表
>區塊中使用列表
>1.第一項
>2.第二項
>+ 第一項
>+ 第二項

######2.列表中使用區塊
* 第一項
>區塊
* 第二項

Markdown代碼
---
若是是段落上的一個函數或片斷的代碼能夠用反引號把它包起來，例如：
`printf();`

代碼區塊使用 4 個空格或者一個製表符（Tab 鍵）。

須要與前一行空一格。
class Test(){}

也能夠用 ``` 包裹一段代碼，並指定一種語言（也能夠不指定）：
```java
class Test(){
public static void Main(String[] args){
System.out.println("Hello World!");
}
}
```

```javascript
$(document).ready(function () {
alert('RUNOOB');
});
```

Markdown連接
---
######1.[連接名稱](連接地址) [百度](www.baidu.com)
######2.<連接地址> <www.baidu.com>

咱們能夠經過變量來設置一個連接，變量賦值在文檔末尾進行：
[百度][1]
[淘寶][2]
[1]:http:www.baidu.com
[2]:http:www.baidu.com

Markdown圖片
---
開頭一個感嘆號!，接着一個方括號，裏面放上圖片的替代文字，接着一個普通括號，裏面放上圖片的網址，最後還能夠用引號包住並加上選擇性的 'title' 屬性的文字。

也能夠像網址那樣對圖片網址使用變量:
[替代文字][1]
[1]:http://static.runoob.com/images/runoob-logo.png

Markdown尚未辦法指定圖片的高度與寬度，若是你須要的話，你能夠使用普通的img標籤。
<img src="http://static.runoob.com/images/runoob-logo.png" width="50%">

Markdown表格
---
Markdown 製做表格使用 | 來分隔不一樣的單元格，使用 - 來分隔表頭和其餘行。須要和上一行空一格。

|表頭|表頭|
|----|----|
|單元格|單元格|
|單元格|單元格|

#####表格的對齊方式：
-: 設置內容和標題欄居右對齊。
:- 設置內容和標題欄居左對齊。
:-: 設置內容和標題欄居中對齊。

| 左對齊 | 右對齊 | 居中對齊 |
| :-----| ----: | :----: |
| 單元格 | 單元格 | 單元格 |
| 單元格 | 單元格 | 單元格 |

Markdown高級技巧
---
#####__支持的 HTML 元素__
不在 Markdown 涵蓋範圍以內的標籤，均可以直接在文檔裏面用 HTML 撰寫。
目前支持的 HTML 元素有：kbd b i em sup sub br等

USE <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd> 重啓電腦

#####__轉義__
Markdown 使用了不少特殊符號來表示特定的意義，若是須要顯示特定的符號則須要使用轉義字符，Markdown 使用反斜槓轉義特殊字符：
\*\*正常顯示星號\*\*

Markdown支持如下這些符號前面加上反斜槓來幫助插入普通的符號：
\\ 反斜線
\` 反引號
\* 星號
\_ 下劃線
\{\} 花括號
\[\] 方括號
\(\) 小括號
\# 井字號
\+ 加號
\- 減號
\. 英文句點
\! 感嘆號

#####__公式__
當你須要在編輯器中插入數學公式時，能夠使用兩個美圓符 $$ 包裹 TeX 或 LaTeX 格式的數學公式來實現。提交後，問答和文章頁會根據須要加載 Mathjax 對數學公式進行渲染。如：
$$
\mathbf{V}_1 \times \mathbf{V}_2 = \begin{vmatrix}
\mathbf{i} & \mathbf{j} & \mathbf{k} \\
\frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\
\frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \\
\end{vmatrix}
${$tep1}{\style{visibility:hidden}{(x+1)(x+1)}}
$$

可畫流程圖、時序圖(順序圖)、甘特圖
---

一、橫向流程圖源碼格式：
```mermaid
graph LR
A[方形] -->B(圓角)
B --> C{條件a}
C -->|a=1| D[結果1]
C -->|a=2| E[結果2]
F[橫向流程圖]
```

二、豎向流程圖源碼格式：
```mermaid
graph TD
A[方形] --> B(圓角)
B --> C{條件a}
C --> |a=1| D[結果1]
C --> |a=2| E[結果2]
F[豎向流程圖]
```

三、標準流程圖源碼格式：
```flow
st=>start: 開始框
op=>operation: 處理框
cond=>condition: 判斷框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 輸入輸出框
e=>end: 結束框
st->op->cond
cond(yes)->io->e
cond(no)->sub1(right)->op
```

四、標準流程圖源碼格式（橫向）：
```flow
st=>start: 開始框
op=>operation: 處理框
cond=>condition: 判斷框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 輸入輸出框
e=>end: 結束框
st(right)->op(right)->cond
cond(yes)->io(bottom)->e
cond(no)->sub1(right)->op
```

五、UML時序圖源碼樣例：
```sequence
對象A->對象B: 對象B你好嗎?（請求）
Note right of 對象B: 對象B的描述
Note left of 對象A: 對象A的描述(提示)
對象B-->對象A: 我很好(響應)
對象A->對象B: 你真的好嗎？
```

六、UML時序圖源碼複雜樣例：
```sequence
Title: 標題：複雜使用
對象A->對象B: 對象B你好嗎?（請求）
Note right of 對象B: 對象B的描述
Note left of 對象A: 對象A的描述(提示)
對象B-->對象A: 我很好(響應)
對象B->小三: 你好嗎
小三-->>對象A: 對象B找我了
對象A->對象B: 你真的好嗎？
Note over 小三,對象B: 咱們是朋友
participant C
Note right of C: 沒人陪我玩
```

七、UML標準時序圖樣例：
```mermaid
%% 時序圖例子,-> 直線，-->虛線，->>實線箭頭
sequenceDiagram
participant 張三
participant 李四
張三->王五: 王五你好嗎？
loop 健康檢查
王五->王五: 與疾病戰鬥
end
Note right of 王五: 合理 食物 <br/>看醫生...
李四-->>張三: 很好!
王五->李四: 你怎麼樣?
李四-->王五: 很好!
```

八、甘特圖樣例：```mermaid%% 語法示例 gantt dateFormat YYYY-MM-DD title 軟件開發甘特圖 section 設計 需求 :done, des1, 2014-01-06,2014-01-08 原型 :active, des2, 2014-01-09, 3d UI設計 : des3, after des2, 5d 將來任務 : des4, after des3, 5d section 開發 學習準備理解需求 :crit, done, 2014-01-06,24h 設計框架 :crit, done, after des2, 2d 開發 :crit, active, 3d 將來任務 :crit, 5d 耍 :2d section 測試 功能測試 :active, a1, after des3, 3d 壓力測試 :after a1 , 20h 測試報告 : 48h```