Markdown的程式設計規則
目錄
Markdown标題
Markdown段落
Markdown清單
Markdown區塊
Markdown代碼
Markdown連結
Markdown圖檔
Markdown表格
Markdown擴充功能
參考資料
Markdown标題
- 使用
=
-
一級标題
=======
-------
- 使用
#
#
##
###
####
#####
######
Markdown段落
- 換行
- 段落的換行是使用兩個以上空格加上回車
- 在段落後面使用一個空行來表示重新開始一個段落
- 字型
- 斜體文本
_
_
*
*
- 粗體文本
__
__
**
**
- 粗斜體文本
___
___
***
***
- 斜體文本
- 分隔線
- 在一行中用三個以上的
*
-
_
***
* * *
---
- - -
___
_ _ _
- 在一行中用三個以上的
- 删除線
- 如果段落上的文字要添加删除線，隻需要在文字兩旁加上兩個波浪線
~~
~~
~~
- 如果段落上的文字要添加删除線，隻需要在文字兩旁加上兩個波浪線
- 下劃線
- 下劃線可以通過HTML的
<u>
<u>
</u>
- 下劃線可以通過HTML的
- 腳注
- 腳注是對文本的補充說明
建立腳注格式 [^1]
[^1]: 腳注
- 腳注是對文本的補充說明
Markdown清單
- 無序清單
- 無序清單使用
*
-
+
*
-
+
- 第一項
- 第一項
- 第一項
- 無序清單使用
- 有序清單
- 有序清單使用數字并加上
.
1.
2.
3.
- 第一項
- 第二項
- 第三項
- 有序清單使用數字并加上
- 清單嵌套
- 清單嵌套隻需要在子清單中的選項添加四個空格即可
1.
-
-
2.
-
-
- 第一項
- 第一項嵌套的第一個元素
- 第一項嵌套的第二個元素
- 第二項
- 第二項嵌套的第一個元素
- 第二項嵌套的第二個元素
- 第一項
- 清單嵌套隻需要在子清單中的選項添加四個空格即可
Markdown區塊
- 區塊
- 區塊引用是在段落開頭使用
>
>
>
區塊引用
形成方框
- 區塊引用是在段落開頭使用
- 區塊嵌套
- 區塊是可以嵌套的，一個
>
>
>
>
>
>
>
>
最外層
第一層嵌套
第二層嵌套
- 區塊是可以嵌套的，一個
- 區塊中使用清單
- 如果要在區塊項目内放入清單，那麼就需要在
>
>
> 1.
> 2.
> +
> +
> +
區塊中使用清單
- 第一項
- 第二項
- 第一項
- 第二項
- 第三項
- 如果要在區塊項目内放入清單，那麼就需要在
- 清單中使用區塊
- 如果要在清單項目内放入區塊，那麼就需要在
>
*
>
>
*
- 第一項
區塊引用
形成方框
- 第二項
- 第一項
- 如果要在清單項目内放入區塊，那麼就需要在
Markdown代碼
- 代碼函數
- 如果是段落上的一個函數或片段的代碼可以在兩端使用反引号 `
printf()
- 如果是段落上的一個函數或片段的代碼可以在兩端使用反引号 `
- 代碼區塊
- 代碼區塊使用四個空格或者一個制表符（Tab 鍵）
< ?php
echo
;
function test() {
echo
;
}
< ?php
echo
nice
;
function test() {
echo
test
;
}
- 也可以使用 ```包裹一段代碼，并選擇是否指定一種語言
```javascript
$ (document).ready(function() {
alert('nice');
});
$ (document).ready(function() { alert('nice'); });
- 代碼區塊使用四個空格或者一個制表符（Tab 鍵）
Markdown連結
- 普通連結
- 連結名稱 + 連結位址
[
](
)
- 直接使用連結位址
<
>
- 連結名稱 + 連結位址
- 進階連結
- 通過變量來設定一個連結，變量指派在文檔末尾進行
用 b 作為百度網址變量
[
][
]
[b]: http://www.baidu.com/
- 通過變量來設定一個連結，變量指派在文檔末尾進行
Markdown圖檔
- 普通格式
- 開頭一個感歎号
!
[ ]
( )
"
'title'
! [alt 屬性文本] (圖檔位址)
! [alt 屬性文本] (圖檔位址 "可選标題")
Markdown學習Markdown的程式設計規則
- 開頭一個感歎号
- 連結格式
- 像網址那樣對圖檔網址使用變量
用 p 作為百度 logo 圖檔的變量
[
][
]
[p]: http://www.baidu.com/img/bd_logo1.png
- 像網址那樣對圖檔網址使用變量
- img标簽
- 類似 HTML 使用 img 标簽
<img src="http://www.baidu.com/img/bd_logo1.png" width="50%">
Markdown學習Markdown的程式設計規則
- 類似 HTML 使用 img 标簽
Markdown表格
- 表格文法
- 制作表格使用
|
-
| 表頭 | 表頭 |
| ----- | ----- |
| 單元格 | 單元格 |
| 單元格 | 單元格 |
表頭 表頭 單元格 單元格 單元格 單元格
- 制作表格使用
- 對齊方式
- 設定内容和标題欄居左對齊
:-
| 左對齊 |
| :----- |
| 單元格單元格 |
| 單元格單元格單元格 |
左對齊 單元格單元格 單元格單元格單元格 - 設定内容和标題欄居右對齊
-:
| 右對齊 |
| -----: |
| 單元格單元格 |
| 單元格單元格單元格 |
右對齊 單元格單元格 單元格單元格單元格 - 設定内容和标題欄居中對齊
:-:
| 居中對齊 |
| :-----: |
| 單元格單元格 |
| 單元格單元格單元格 |
居中對齊 單元格單元格 單元格單元格單元格
- 設定内容和标題欄居左對齊
Markdown擴充功能
- 支援HTML元素
- 不在Markdown涵蓋範圍之内的标簽，都可以直接在文檔裡面用 HTML 撰寫。目前支援的 HTML 元素有
<kbd>
<b>
<i>
<em>
<sup>
<br>
使用 <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd> 重新開機電腦
- 不在Markdown涵蓋範圍之内的标簽，都可以直接在文檔裡面用 HTML 撰寫。目前支援的 HTML 元素有
- 轉義
- Markdown使用了很多特殊符号來表示特定的意義，如果需要顯示特定的符号則需要使用轉義字元，Markdown使用反斜杠
\
\*\*
\*\*
- Markdown支援以下這些符号前面加上反斜杠來幫助插入普通的符号
\ 反斜線
` 反引号
* 星号
_ 下劃線
{ } 花括号
[ ] 方括号
( ) 小括号
# 井号
+ 加号
- 減号
. 英文句點
! 感歎号
- Markdown使用了很多特殊符号來表示特定的意義，如果需要顯示特定的符号則需要使用轉義字元，Markdown使用反斜杠
- 公式
- 當你需要在編輯器中插入數學公式時，可以使用兩個美元符
$$
$$
\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)}}
$$
Markdown學習Markdown的程式設計規則
- 當你需要在編輯器中插入數學公式時，可以使用兩個美元符
- 流程圖
- 利用typora的源碼模式畫橫向流程圖
```mermaid
graph LR
A[方形] -->B(圓角)
B --> C{條件a}
C -->|a=1| D[結果1]
C -->|a=2| E[結果2]
F[橫向流程圖]
- 利用typora的源碼模式畫豎向流程圖
```mermaid
graph TD
A[方形] --> B(圓角)
B --> C{條件a}
C --> |a=1| D[結果1]
C --> |a=2| E[結果2]
F[豎向流程圖]
- 利用typora的源碼模式畫标準流程圖
```mermaid
flowchat
st=>start: 開始框
op=>operation: 處理框
cond=>condition: 判斷框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 輸入輸出框
e=>end: 結束框
st->op->cond
cond(yes)->io->e
cond(no)->sub1(right)->op
- 利用typora的源碼模式畫标準流程圖（橫向）
```mermaid
flowchat
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
- 利用typora的源碼模式畫橫向流程圖
- UML圖
- 利用typora的源碼模式畫UML時序圖
```mermaid
sequenceDiagram
對象A->對象B: 對象B你好嗎?(請求)
Note right of 對象B: 對象B的描述
Note left of 對象A: 對象A的描述(提示)
對象B-->對象A: 我很好(響應)
對象A->對象B: 你真的好嗎？
- 利用typora的源碼模式畫複雜UML時序圖
```mermaid
sequenceDiagram
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: 沒人陪我玩
- 利用typora的源碼模式畫标準UML時序圖
```mermaid
%% 時序圖例子,-> 直線，-->虛線，->>實線箭頭
sequenceDiagram
participant 張三
participant 李四
張三->王五: 王五你好嗎？
loop 健康檢查
王五->王五: 與疾病戰鬥
end
Note right of 王五: 合理 食物 <br/>看醫生...
李四-->>張三: 很好!
王五->李四: 你怎麼樣?
李四-->王五: 很好!
- 利用typora的源碼模式畫UML時序圖
- 甘特圖
- 利用typora的源碼模式畫甘特圖
```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
Markdown學習Markdown的程式設計規則
- 利用typora的源碼模式畫甘特圖
參考資料
RUNOOB.COM
- 腳注 ↩︎