markdown使用中的小總結

Markdown 的列表的符號有哪些???

無序列表使用星號(*)、加號(+)或是減號(-)作爲列表標記:

* 第一項
* 第二項
* 第三項

+ 第一項
+ 第二項
+ 第三項

- 第一項
- 第二項
- 第三項

顯示結果如下:

  • 第一項
  • 第二項
  • 第三項
  • 第一項
  • 第二項
  • 第三項
  • 第一項
  • 第二項
  • 第三項

有序列表使用數字並加上 . 號來表示,如:

1. 第一項
2. 第二項
3. 第三項

顯示結果如下:

  1. 第一項
  2. 第二項
  3. 第三項

列表嵌套
列表嵌套只需在子列表中的選項添加四個空格即可:

1. 第一項:
    - 第一項嵌套的第一個元素
    - 第一項嵌套的第二個元素
2. 第二項:
    - 第二項嵌套的第一個元素
    - 第二項嵌套的第二個元素

顯示結果:

  1. 第一項:
    • 第一項嵌套的第一個元素
    • 第一項嵌套的第二個元素
  2. 第二項:
    • 第二項嵌套的第一個元素
    • 第二項嵌套的第二個元素

如何在markdown中使用上標、下標????

在Markdown中嵌套一個HTML的語法,即使用HTML中上標、下標的語法即可。

上標的語法:O(n<sup>2</sup>)
下標的語法:O(log<sub>R</sub>B)

顯示效果:
O(n2)
O(logRB)

Markdown 表格如何對齊???

  • Markdown 製作表格使用 | 來分隔不同的單元格,使用 - 來分隔表頭和其他行。
  • 語法格式如下:
|  表頭   | 表頭  |
|  ----  | ----  |
| 單元格  | 單元格 |
| 單元格  | 單元格 |
  • 顯示結果:
表頭 表頭
單元格 單元格
單元格 單元格
  • 對齊方式
我們可以設置表格的對齊方式:

-: 設置內容和標題欄居右對齊。
:- 設置內容和標題欄居左對齊。
:-: 設置內容和標題欄居中對齊。
  • 顯示案例:
| 左對齊 | 右對齊 | 居中對齊 |
| :-----| ----: | :----: |
| 單元格 | 單元格 | 單元格 |
| 單元格 | 單元格 | 單元格 |
  • 顯示結果:
左對齊 右對齊 居中對齊
單元格 單元格 單元格
單元格 單元格 單元格

支持的一些HTML標籤,形成美觀的按鈕格式

支持的 HTML 元素
不在 Markdown 涵蓋範圍之內的標籤,都可以直接在文檔裏面用 HTML 撰寫。
目前支持的 HTML 元素有:<kbd> <b> <i> <em> <sup> <sub> <br>等 ,如:
  • 例如
使用 <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>N</kbd> 新建圖層
  • 顯示
    • 使用 Ctrl+Shift+N 新建圖層

繪製一些流程圖、時序圖(順序圖)、甘特圖

  1. 橫向流程圖源碼格式:
​```mermaid
graph LR
A[方形] --&gt;B(圓角)
    B --&gt; C{條件a}
    C --&gt;|a=1| D[結果1]
    C --&gt;|a=2| E[結果2]
    F[橫向流程圖]```
  • 效果圖如下:
a=1
a=2
方形
圓角
條件a
結果1
結果2
橫向流程圖
  1. 豎向流程圖源碼格式:
​```mermaid
graph TD
A[方形] --> B(圓角)
    B --> C{條件a}
    C --> |a=1| D[結果1]
    C --> |a=2| E[結果2]
    F[豎向流程圖]```
  • 效果圖如下:
a=1
a=2
方形
圓角
條件a
結果1
結果2
豎向流程圖
  1. 標準流程圖源碼格式:
​```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
​```
  • 效果圖如下:
Created with Raphaël 2.2.0開始框處理框判斷框(是或否?)輸入輸出框結束框子流程yesno
  1. 標準流程圖源碼格式(橫向):
​```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
​```
  • 效果圖如下:
Created with Raphaël 2.2.0開始框處理框判斷框(是或否?)輸入輸出框結束框子流程yesno
  1. UML時序圖源碼樣例:
​```mermaid
sequenceDiagram
對象A->>對象B: 對象B你好嗎?(請求)
Note right of 對象B: 對象B的描述
Note left of 對象A: 對象A的描述(提示)
對象B-->>對象A: 我很好(響應)
對象A->>對象B: 你真的好嗎?
​```
  • 效果圖如下:
對象A對象B對象B你好嗎?(請求)對象B的描述對象A的描述(提示)我很好(響應)你真的好嗎?對象A對象B標題:複雜使用
  1. 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: 沒人陪我玩
​```
  • 效果圖如下:
對象A對象B老王C對象B你好嗎?(請求)對象B的描述對象A的描述(提示)我很好(響應)你好嗎對象B找我了你真的好嗎?我們是朋友沒人陪我玩對象A對象B老王C標題:複雜使用
  1. UML標準時序圖樣例:
​```mermaid
%% 時序圖例子,-> 直線,-->虛線,->>實線箭頭
  sequenceDiagram
    participant 張三
    participant 李四
    張三->王五: 你最近的目標?
    loop 參與面試
        王五->王五: 與生活追逐
    end
    Note right of 王五: 學習 工作 <br/>求職...
    李四-->>張三: 升學!
    王五->李四: 最近的目標?
    李四-->王五: 升學!```
  • 效果圖如下:
張三李四王五你最近的目標?與生活追逐loop[ 參與面試 ]學習 工作 求職...升學!最近的目標?升學!張三李四王五標題:複雜使用
  1. 甘特圖樣例:
```mermaid
		gantt
        dateFormat  YYYY-MM-DD
        title 軟件開發甘特圖
        section 設計
        需求                      :done,    des1, 2020-05-06,2020-05-08
        原型                      :active,  des2, 2020-05-09, 3d
        UI設計                     :         des3, after des2, 5d
    未來任務                     :         des4, after des3, 5d
        section 開發
        學習準備理解需求                      :crit, done, 2020-05-06,6d
        設計框架                             :crit, done, after des2, 3d
        開發                                 :crit, active, 3d
        未來任務                              :crit, 5d
        耍                                   :2d
        section 測試
        功能測試                              :active, a1, after des3, 3d
        壓力測試                               :after a1  , 3d
        測試報告                               : 3d
```
  • 效果圖如下:
Mon 11Mon 18Mon 25需求 原型 UI設計 未來任務 學習準備理解需求 設計框架 開發 未來任務 功能測試 壓力測試 測試報告 設計開發測試軟件開發甘特圖

結束

這裏只做記錄,遇到新的方法會持續更新,便於查閱。雖然網上有很多!!!!!

參考:https://mermaidjs.github.io/#/
參考:https://markdown-zh.readthedocs.io/en/latest/
參考:https://www.appinn.com/markdown/

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章