玩轉 Markdown 所有特性

:package: 本文已歸檔到：「blog」

目錄

• 目錄
• 標題
• 文本樣式
• 列表
• 分割線
• 鏈接
• 引用
• 代碼高亮
• 表格
• Emoji 表情
• 註腳
• 數學公式
• Diff
• 流程圖
• HTML
• 編輯器
• 參考資料

標題

Markdown 支持六個級別的標題。

語法：
# 一級標題
## 二級標題
### 三級標題
#### 四級標題
##### 五級標題
###### 六級標題

文本樣式

:bulb: 粗體、斜體、刪除線可以混合使用。

在 Markdown 中，粗體文本、斜體文本可以使用 * 或 _ 符號標記。建議統一風格，始終只用一種符號。

語法	效果
普通文本	普通文本
*斜體文本* _斜體文本_	斜體文本 斜體文本
**粗體文本** __粗體文本__	粗體文本 粗體文本
~~刪除文本~~	刪除文本
***粗斜體文本*** ___粗斜體文本___	*粗斜體文本* ___粗斜體文本___

列表

無序列表

• RED
• YELLOW
• BLUE

有序列表

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

任務列表

• [x] 完成任務
• [ ] 計劃任務

多級列表

• 數據結構
  • 線性表
    • 順序表
    • 鏈表
      • 單鏈表
      • 雙鏈表
  • 樹
    • 二叉樹
      • 二叉平衡樹

分割線

***、---、___ 都可以作爲分割線。

***

___

鏈接

普通鏈接

語法：

[我的博客](https://dunwu.github.io/blog/)

• [] 中標記鏈接名。類似 HTML 中 元素的 title 屬性。
• () 中標記鏈接的 url，也支持相對路徑（前提是資源可以訪問）。類似 HTML 中 元素的 href 屬性。

效果：

• 我的博客

圖片

Markdown 引用圖片的語法：

![alt](url title)

alt 和 title 即對應 HTML 中 img 元素的 alt 和 title 屬性（都可省略）：

• alt - 表示圖片顯示失敗時的替換文本。
• title - 表示鼠標懸停在圖片時的顯示文本（注意這裏要加引號）
• url - 即圖片的 url 地址

圖片鏈接

可以將圖片和鏈接混合使用。


錨點

其實呢，每一個標題都是一個錨點，和 HTML 的錨點（#）類似，比如：回到頂部

引用

普通引用：

:question: 什麼是 Markdown

Markdown是一種輕量級標記語言，創始人爲約翰·格魯伯（英語：John Gruber）。它允許人們“使用易讀易寫的純文本格式編寫文檔，然後轉換成有效的XHTML（或者HTML）文檔”。[[4]](https://zh.wikipedia.org/wiki/Markdown#cite_note-md-4)這種語言吸收了很多在[電子郵件](https://zh.wikipedia.org/wiki/電子郵件)中已有的純文本標記的特性。 —— 摘自 Wiki

嵌套引用：

數據結構

> 樹

>

> > 二叉樹

> >

> > > 平衡二叉樹

> > >

> > > > 滿二叉樹

代碼高亮

標籤

語法：

`Markdown` `Doc`

效果：

Markdown, Doc

代碼塊

語法一：在文本前後都使用三個反引號進行標記。【✔️ 推薦】

這是一個文本塊。
這是一個文本塊。
這是一個文本塊。

語法二：在連續幾行的文本開頭加入 1 個 Tab 或者 4 個空格。【❌ 不推薦】

    這是一個文本塊。
    這是一個文本塊。
    這是一個文本塊。

語法

在三個反引號後面加上編程語言的名字，另起一行開始寫代碼，最後一行再加上三個反引號。

public static void main(String[]args){} //Java

int main(int argc, char *argv[]) //C

echo "hello GitHub" #Bash

document.getElementById('myH1').innerHTML = 'Welcome to my Homepage' //javascipt

string &operator (const string& A,const string& B) //cpp

表格

一般表格：

表頭 1	表頭 2
表格單元	表格單元
表格單元	表格單元

表格可以指定對齊方式：

序號	商品	價格
1	電腦	6000.0
2	鼠標	100.0
3	鍵盤	200.0

Emoji 表情

:bulb: 注意：部分 Markdown 引擎支持 Emoji。

合理使用 Emoji 表情，往往可以使得文章內容更加豐富生動。例如：:heavycheckmark: :x: :bulb: :bell: :heavyexclamationmark: :question:

更多 Emoji 表情請參考：

- http://emojihomepage.com/

- http://www.emoji-cheat-sheet.com

註腳

:bulb: 注意：部分 Markdown 引擎支持註腳。

一個具有註腳的文本。[^1]

[^1]: 註腳的解釋

數學公式

:bulb: 注意：部分 Markdown 引擎支持 Latex。

很多文檔中，需要引入一些數學符號、特殊符號，其排版問題比較頭疼。這種問題，可以用 Latex 來解決，大部分 Markdown 引擎都支持 Latex。

Latex 可以使用 $ 符號來標記 Latex 表達式，下面是一個數學公式示例：

$$Gamma(z) = int_0^infty t^{z-1}e^{-t}dt,.$$

列舉一些常用數學符號：

符號	語法	描述
$leq$	$leq$	小於等於
$geq$	$geq$	大於等於
$neq$	$neq$	不等於
$approx$	$approx$	約等於
$infty$	$infty$	無窮
$prod_{x}^{y}$	$prod_{x}^{y}$	累乘
$sum_{i=0}^n$	$sum_{i=0}^n$	求和
$int$	$int$	積分
$iint$	$iint$	雙重積分
$log_x{y}$	$log_x{y}$	對數
$x^{y 1}$	$x^{y 1}$	上標
$x_{y 1}$	$x_{y 1}$	下標
$frac{x}{y}$	$frac{x}{y}$	分數
$sqrt[y]{x}$	$sqrt[y]{x}$	開方
$sin$	$sin$	正弦
$cos$	$cos$	餘弦
$tan$	$tan$	正切

更多數學符號支持請參考：

- Begin-Latex-in-minutes

- Markdown 數學符號&公式

Diff

:bulb: 注意：部分 Markdown 引擎支持 Diff。

版本控制的系統中都少不了 diff 的功能，即展示一個文件內容的增加與刪除。GFM 中可以顯示的展示 diff 效果。可以用 開頭表示新增，- 開頭表示刪除。

  新增內容
- 刪除內容

UML 圖

💡 注意：部分 Markdown 引擎支持 mermaid。

mermaid 提供了多種 UML 圖。詳情請參考：mermaid 文檔

流程圖

graph LR
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]

時序圖

sequenceDiagram
    Alice->>Bob: Hello Bob, how are you?
    alt is sick
        Bob->>Alice: Not so good :(
    else is well
        Bob->>Alice: Feeling fresh like a daisy
    end
    opt Extra response
        Bob->>Alice: Thanks for asking
    end

甘特圖

gantt
       dateFormat  YYYY-MM-DD
       title Adding GANTT diagram functionality to mermaid

       section A section
       Completed task            :done,    des1, 2014-01-06,2014-01-08
       Active task               :active,  des2, 2014-01-09, 3d
       Future task               :         des3, after des2, 5d
       Future task2              :         des4, after des3, 5d

       section Critical tasks
       Completed task in the critical line :crit, done, 2014-01-06,24h
       Implement parser and jison          :crit, done, after des1, 2d
       Create tests for parser             :crit, active, 3d
       Future task in critical line        :crit, 5d
       Create tests for renderer           :2d
       Add to mermaid                      :1d

       section Documentation
       Describe gantt syntax               :active, a1, after des1, 3d
       Add gantt diagram to demo page      :after a1  , 20h
       Add another diagram to demo page    :doc1, after a1  , 48h

       section Last section
       Describe gantt syntax               :after doc1, 3d
       Add gantt diagram to demo page      :20h
       Add another diagram to demo page    :48h

HTML

有些 Markdown 引擎支持在文檔中嵌入的 html 元素。

有些 Markdown 語法所不支持的特性，可以使用 html 元素來支持。

摺疊

摺疊內容一

展開才能看到的內容

摺疊內容二

展開才能看到的內容

居中

居中顯示的文本

圖片尺寸

編輯器

推薦 Markdown 編輯器

• Typora - 個人認爲是功能最強的 Markdown 編輯器。
• Visual Studio Code - 可以通過安裝插件，量身打造 Markdown 編輯器。
• marktext - 一款簡單優雅的 Markdown 編輯器。
• StackEdit - 在線 Markdown 編輯器。
• Editor.md - 在線 Markdown 編輯器。
• Marxico - 一款專爲印象筆記（Evernote）打造的 Markdown 編輯器。

想了解更多 Markdown 編輯器可以參考：主流 Markdown 編輯器推薦

參考資料

• https://zh.wikipedia.org/wiki/Markdown
• https://github.com/guodongxiaren/README
• markdown-cheatsheet
• Begin-Latex-in-minutes
• https://github.com/mermaid-js/mermaid