Markdown 的基礎使用

Markdown 是一個 Web 上使用的文本到 HTML 的轉換工具，可以通過簡單、易讀易寫的文本格式生成結構化的 HTML 文檔。目前 github、Stackoverflow 等網站均支持這種格式.

官方文檔

• Markdown 文件要以.md或者.markdown爲後綴名

• Markdown 文件可以導出爲 word,html,pdf,image…

• MarkdownPad2, Typora 是通用的 Markdown 編輯工具
• Markdown 支持和一些html標籤一起使用

接下來描述一下常用的一些語法：

1. 標題樣例

使用 # 來標記，# 與內容保留一個空格;可以選擇性的閉合;
多一個#代表降一級（即字號小一級），總共有 6 級；分別對應h1 -h6：

標題樣例:

# 這是一級標題
## 這是二級標題
...
###### 這是六級標題

題效果：

這是一級標題

這是二級標題

這是三級標題

這是四級標題

這是五級標題

這是六級標題

---

2. 字體樣例

• 斜體

  斜體的內容需要使用一對下劃線 _ 或者一對星號 * 進行包裹(部分編輯器會強制轉換 _ 包裹);
  標籤與內容之間不能有空格;如果內容中含有相關標籤內容需要使用 \ 進行轉義與編程語言相似;
  在.md文件中可以直接使用部分標籤

  斜體樣例： _斜體_ 或者 *斜體* 或者 <em>斜體</em>

  斜體效果： 斜體, 斜體, 斜體

• 加粗

  加粗的內容需要使用兩個星號 ** 或者兩個下劃線 __ 進行包裹(部分編輯器會強制轉換 ** 包裹)
  標籤與內容之間不能有空格;如果內容中含有相關標籤內容需要使用 \ 進行轉義與編程語言相似;
  當頁面加載時會被轉成 html 中 <strong>標籤

  粗體樣例： **粗體** 或者 __粗體__ 或者 <strong>粗體</strong>

  粗體效果： 粗體, 粗體, 粗體

• 斜體加粗

  斜體加粗的內容需要使用兩個星號和一個下劃線 **_ 進行對稱包裹;
  標籤與內容之間不能有空格;如果內容中含有相關標籤內容需要使用 \ 進行轉義與編程語言相似;

  斜體加粗樣例： **_斜體加粗_** 或者 ***斜體加粗*** 或者 ___斜體加粗___

  斜體加粗效果：斜體加粗, 斜體加粗, 斜體加粗

• 刪除線

  增加刪除線的內容需要使用兩對波浪號 ~~ 進行包裹
  標籤與內容之間不能有空格;如果內容中含有相關標籤內容需要使用 \ 進行轉義與編程語言相似;

  刪除線樣例：~~刪除線~~

  刪除線效果：刪除線

• 下劃線

  下劃線是使用前端標籤的方式

  下劃線樣例：<u>下劃線</u>
  下劃線效果：下劃線

• 註解

  添加註解形式的文本

  註解文字樣例：這裏是一個 [^Markdown]:一種標記語言

  註解文字效果：

  這裏是一個 ¹

---

3. 區塊引用樣例

區塊引用，就是描述內容標記爲一個模塊;Markdown 標記區塊引用是使用 > 的引用方式
區塊裏面可以嵌套使用其他的樣式

區塊應用樣例：

> 1. 這是一段詳細的描述...
> 2. 這是描述的內部的引用...
> > 這是描述的內部的引用...

效果如下：

1. 這是一段詳細的描述…
2. 這是描述的內部的引用…

這是描述的內部的引用…

4. 分割線樣例

一條淺灰色的實線，使用三個及以上數量的星號***或者三個及以上數量減號---或者三個及以上數量下劃線___進行標識,部分編輯器強制變更爲減號，依據當前位置上下文環境；注意該行內不能有其他的元素

例如：

    ***
    ---
    ___

效果如下：

---

5. 圖片樣例

圖片加載至支持使用網絡圖片,使用![alt](image_url "title"),和超鏈接有些相似,相對超鏈接就是增加了一個 !進行標識;

注意: url與title之間不需要加,

圖片樣例：

![This is image](http://inews.gtimg.com/newsapp_match/0/359390627/0 "這是一張圖片!")

圖片效果：

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-UllGXp6C-1586745758669)(http://inews.gtimg.com/newsapp_match/0/359390627/0 “這是一張圖片!”)]

6. 超鏈接樣例

使用文字描述，支持點擊進行跳轉，使用 [desc](url "title"),或者直接給出(url)和圖片有些相似;
當頁面加載時會被轉成 html 中 <a> 標籤

注意: url與title之間不需要,

超鏈接樣例:

[Typora官網](https://typora.io/ "Typora官網")
或者
<https://typora.io/>

超鏈接效果：

Typora 官網

https://typora.io/

7. 列表樣例

• 有序列表樣例

  有序列表：使用 1.,2.,3.,…,注意序號和內容之間需要空格分隔;

  有序列表樣例：

  1. title
  2. font
  3. image
  

  有序列表效果：

  1. title
  2. font
  3. image

• 無序列表樣例

  無序列表: +,-,*,…排下去，不需要排序，部分編輯器會自動強制，注意序號和內容之間需要空格分隔;

  無序列表樣例:

  - 超鏈接
  * 代碼
  - 邏輯條件
  

  無序列表效果：

  • 超鏈接
  • 代碼
  • 邏輯條件

8. 代碼樣例

代碼樣式有兩種:

單行代碼和多行代碼(兩者的區別就是多行樣式中區分間距和換行，保留代碼塊的樣式，而單行則忽略);

• 單行代碼：使用一對反向單引號 `` 包裹起來; 當頁面加載時會被轉成html中p` 標籤;

`This is a example ......`

單行代碼效果:

This is a example ......

• 多行代碼：使用三對反向單引號```包裹起來;這種模式下支持多語言：c，java，php，js，python…幾乎所有開發語言)

​```java     // 這裏指定代碼的語言
public static void main(String[] args){
    System.out.print("Hello world !")
}

多行代碼效果：

public static void main(String[] args){
   System.out.print("Hello world !")
}

---

9. 表格

表格使用 | tab | tab | tab |...|聲明表頭字段；
表格使用 | :-- | :-: | --: |...|申明表單中對應列中的內容對其方式,冒號在左側即左對齊，在右側即右對齊，在兩側即居中；
表格使用 |value|value|value|...|插入數據；

表格樣例：

| name   | age | gender | user_info                   |
| :----  | --: | :----: | :---------------------------|
| Jack   |  18 |   男   | 高高高 de 一批............... |
| Leo    |  10 |   女   | 富富富 de 一批............... |
| Suxan  |  28 |   男   | 帥帥帥 de 一批............... |

表格效果：

name	age	gender	user_info
Jack	18	男	高高高 de 一批…
Leo	10	女	富富富 de 一批…
Suxan	28	男	帥帥帥 de 一批…

10. 流程圖

我擦，這個好強大…直接看例子： 不過 github 好像不支持顯示

​```mermaid
flowchat
st=>start: 開始
op=>operation: My Operation
cond=>condition: Yes or No?
e=>end
st->op->cond
cond(yes)->e
cond(no)->op
&```

效果：

工具： 推薦使用typora,官網下載 下滑至"Download" module 選擇對應的版本

塊與嵌套：

Title

• This is title : A;

  content;

  1. content;
  2. content;

• This is title : B

  content;

  • content;

  • content;

    [外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-AeDekzmW-1586745758672)(https://tse1-mm.cn.bing.net/th?id=OIP.uUT5wt6VDHJ7zAFDru9IvQHaHa&w=156&h=160&c=8&rs=1&qlt=90&pid=3.1&rm=2)]

This is title : c

鏈接content;

---

1. ↩︎