markdown常用語法

checha發表於2024-07-02

[TOC]

閱讀說明

  1. 這篇文章參考了官網以及各路大佬的文章，這裡感謝了。
  2. 不同平臺解析出來的效果會略有差別，甚至解析不出來或者原樣解析。
  3. 內容不斷完善更新中.....
  4. 隨時歡迎大家對文章中有歧義的地方作出指正。

語法注意事項

  1. Markdown語法中，所有符號保持在 英文輸入法 下編寫的好習慣。
  2. Markdown編寫的過程中，保持 題目說明 和 語法實現 之間空一行的習慣。
  3. 注意不同符號後面加的內容不同，解析出來的效果不同，比如：程式碼塊和圖示的表示。
  4. 注意 傾斜字型 和 符號列表 的寫法區別（傾斜字型 * 號後面直接加內容，而符號列表先寫 * 號，然後空格，再寫符號列表內容）。
  5. Markdown語法中 Tab 和 空格 的關係，有時候不一樣，但無非兩種情況，要麼 1Tab = 2空格，要麼 1Tab = 4空格。可以自己先試，看解析如何，最後確定即可。
  6. 在插入表格的語法中，第二行必須要有 | --- | ，否則不能解析處表格。並且表格的列數由 | --- | 的個數決定。
  7. 在插入流程圖的語法中，第一行不能缺 graph TD 命令，否則無法正常顯示流程圖。
  8. 在插入時序圖的語法中，第一行不能缺 sequenceDiagram 命令，否則無法正常顯示時序圖。
  9. 在插入甘特圖的語法中，第一行不能缺 gantt 命令，否則無法正常顯示甘特圖。
  10. 設定之後可以自動根據設定的分級標題來自動生成目錄。
  11. 目錄的語法格式為：[TOC]

標題

    # 一級標題
    ## 二級標題
    ### 三級標題
    #### 四級標題
    ##### 五級標題
    ###### 六級標題  
複製程式碼

引用

    >我是引用
    >>我是引用巢狀
    >>>我比你還巢狀
複製程式碼

我是引用

我是引用巢狀

我比你還巢狀

郵箱

    <zq_prog@aliyun.com>
複製程式碼

zq_prog@aliyun.com

連結

    [百度](https://www.baidu.com/)
複製程式碼

百度

文字相關

    **我是加粗**
    *我是斜體*
    ***我既加粗也傾斜***
    <u>我是下劃線</u>
    ~~我是刪除線，下面的三個*號表示分割線~~
    ***  
複製程式碼

我是加粗 我是斜體 我既加粗也傾斜 我是下劃線 我是刪除線，下面的三個*號表示分割線

列表

    先看數字列表
    1. 我是數字列表一
    2. 我是數字列表二
    
    再看符號列表
    * 我是符號列表一
    * 我是符號列表二
    
    尾看數字列表和符號列表的組合
    1. 我是組合的數字列表一
    2. 我是組合的數字列表二
        * 我是組合的符號列表一
        * 我是組合的符號列表二
複製程式碼

先看數字列表

  1. 我是數字列表一
  2. 我是數字列表二

再看符號列表

  • 我是符號列表一
  • 我是符號列表二

尾看數字列表和符號列表的組合

  1. 我是組合的數字列表一
  2. 我是組合的數字列表二
    • 我是組合的符號列表一
    • 我是組合的符號列表二

待辦事項

    模組計劃
    * [x] 計劃一
    * [ ] 計劃二
    * [ ] 計劃三
複製程式碼

模組計劃

  • 計劃一
  • 計劃二
  • 計劃三

特殊符號

Markdown語法中，用 \ + 特殊符號，才能真正解析成我們想要的符號

    \\ ———— 反斜線
    \` ———— 反引號
    \* ———— 星號
    \_ ———— 下劃線
    \{} ———— 花括號
    \[] ———— 方括號
    \() ———— 括號
    \# ———— 井字號
複製程式碼

\ ———— 反斜線 ` ———— 反引號 * ———— 星號 _ ———— 下劃線 {} ———— 花括號 [] ———— 方括號 () ———— 括號 # ———— 井字號

程式碼塊

常見支援的語言有

language key
HTTP http
Java java
C++ cpp
C# cs
JavaScript javascript
HTML html
CSS css
JSON json
SCSS scss
TypeScript typescript

語法如下，並且語法高亮顯示

    ```key
        程式碼塊
    ```
複製程式碼
    ```javascript
        var num = 0;
        for (var i = 0; i < 5; i++) {
            num+=i;
        }
        console.log(num);
    ```
複製程式碼
    var num = 0;
    for (var i = 0; i < 5; i++) {
        num+=i;
    }
    console.log(num);
複製程式碼

插入連結

    [zq_prog掘金](https://juejin.im/user/5c5c29876fb9a049af6db707/posts)
複製程式碼

zq_prog掘金

插入圖片

    ![image](
https://user-gold-cdn.xitu.io/2019/3/10/16967b0668b8ae85?w=622&h=350&f=jpeg&s=23885)
複製程式碼

image

插入表格

    | 表頭一 | 表頭二 | 表頭三 | 
    | --- | --- | --- | --- |
    | 內容一 | 內容二 | 內容三 | 內容四 |
    | 內容一 | 內容二 | 內容三 | 內容四 |
複製程式碼
表頭一 表頭二 表頭三
內容一 內容二 內容三
內容一 內容二 內容三

插入圖表

    1. **目前支援餅狀圖、折線圖、柱狀圖和條形圖，只需將 type 改為對應的pie、line、column 和 bar。**
    2. **預設為柱狀圖**
    3. **資料和各模組標題中間要空
    
    ```chart
    ,預算,收入,花費,債務
    June,5000,8000,4000,6000
    July,3000,1000,4000,3000
    Aug,5000,7000,6000,3000
    Sep,7000,2000,3000,1000
    Oct,6000,5000,4000,2000
    Nov,4000,3000,5000,
    
    type: pie
    title: 每月收益
    x.title: Amount
    y.title: Month
    y.suffix: $
    ```
複製程式碼
  1. 目前支援餅狀圖、折線圖、柱狀圖和條形圖，只需將 type 改為對應的pie、line、column 和 bar。
  2. 預設為柱狀圖
  3. 資料和各模組標題中間要空一行
    ,預算,收入,花費,債務
    June,5000,8000,4000,6000
    July,3000,1000,4000,3000
    Aug,5000,7000,6000,3000
    Sep,7000,2000,3000,1000
    Oct,6000,5000,4000,2000
    Nov,4000,3000,5000,

    type: pie
    title: 每月收益
    x.title: Amount
    y.title: Month
    y.suffix: $
複製程式碼

插入數學公式

    ```math  
        表示式
    ```
複製程式碼
    ```math          
        e^{i\pi} + 1 = 0
    ```
複製程式碼

e^iπ+1=0

    e^{i\pi} + 1 = 0
複製程式碼

插入流程圖

    ```mermaid
            graph TD
            A[模組A] -->|A1| B(模組B)
            B --> C{判斷條件C}
            C -->|條件C1| D[模組D]
            C -->|條件C2| E[模組E]
            C -->|條件C3| F[模組F]
     ``
複製程式碼
    graph TD
    A[模組A] -->|A1| B(模組B)
    B --> C{判斷條件C}
    C -->|條件C1| D[模組D]
    C -->|條件C2| E[模組E]
    C -->|條件C3| F[模組F]
複製程式碼

插入時序圖

    ```mermaid
        sequenceDiagram
        A->>B: 是否已收到訊息？
        B-->>A: 已收到訊息
    ```
複製程式碼
    sequenceDiagram
    A->>B: 是否已收到訊息？
    B-->>A: 已收到訊息
複製程式碼

插入甘特圖

    ```mermaid
        gantt
        title 甘特圖
        dateFormat YYYY-MM-DD
        section 專案A
        任務1 :a1, 2018-06-06, 30d
        任務2 :after a1 , 20d
        section 專案B
        任務3 :2018-06-12 , 12d
        任務4 : 24d
    ```
複製程式碼
    gantt
    title 甘特圖
    dateFormat YYYY-MM-DD
    section 專案A
    任務1 :a1, 2018-06-06, 30d
    任務2 :after a1 , 20d
    section 專案B
    任務3 :2018-06-12 , 12d
    任務4 : 24d
複製程式碼

相關文章