Markdown 自我學(xué)習(xí)教程

前提

由于有的時候需要編寫技術(shù)需求文檔、使用文檔、測試文檔,又加上最近使用Markdown比較多,所以積累了一些經(jīng)驗。本人主要通過以下幾個參考鏈接中學(xué)習(xí)了一部分,并總結(jié)了一點自己寫的東西,與大家共同分享。同時由于在簡書的Markdown文本編輯器中, 腳注、MathJax、流程圖、時序圖、甘特圖、任務(wù)列表(Task lists)、HTML部分標簽等等暫不支持,所以這部分Markdown語言的顯示效果我用在其他軟件上顯示的結(jié)果圖片來進行展示,各位如果想練習(xí)一下,可以在其他平臺或者軟件上使用,我這邊使用更多的是Typora 。

Markdown 簡介

Markdown 是一種輕量級標記語言,它允許人們使用易讀易寫的純文本格式編寫文檔。

Markdown 語言在 2004 由約翰·格魯伯(英語:John Gruber)創(chuàng)建。

Markdown 編寫的文檔可以導(dǎo)出 HTML 、Word、圖像、PDF、Epub 等多種格式的文檔。

Markdown 編寫的文檔后綴為 .md, .markdown

Markdown 標題

  • 使用 # 號可表示 1-6 級標題,一級標題對應(yīng)一個 # 號,二級標題對應(yīng)兩個 # 號,以此類推。

# 號后,記得空一格再加標題文本。

# 一級標題
## 二級標題
### 三級標題
#### 四級標題
##### 五級標題
###### 六級標題

顯示效果如下所示:


多級標題展示.png
  • 使用 = 和 - 標記一級和二級標題

首先輸入標題文字,然后shift + enter 另起一行, 輸入兩個或兩個以上 “ = / - ” ,示例語法格式如下:

我展示的是一級標題
=================

我展示的是二級標題
-----------------

顯示效果如下所示:


一二級標題展示.png

Markdown 鏈接

鏈接使用方法如下:

[鏈接名稱](鏈接地址)

或者

<鏈接地址>

顯示效果如下所示:

鏈接名稱包含測試連接:百度一下

直接使用鏈接地址:https://www.baidu.com

  • 高級鏈接

我們可以通過變量來設(shè)置一個鏈接,變量賦值在文檔末尾進行:

這個鏈接用 10 作為網(wǎng)址變量 [Google][10]
然后在文檔的結(jié)尾為變量賦值(網(wǎng)址)

[10]: http://www.google.com/

顯示效果如下所示:

這個鏈接用 10 作為網(wǎng)址變量 Google
然后在文檔的結(jié)尾為變量賦值(網(wǎng)址)

Markdown 列表

Markdown 支持有序列表和無序列表。

無序列表使用星號 (*) 、加號 (+) 或是減號 (-) 作為列表標記,這些標記后面要添加一個空格,然后再填寫內(nèi)容:

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

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


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

顯示效果如下所示:

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

有序列表使用數(shù)字并加上 . 號來表示,如:

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

顯示效果如下所示:

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

列表嵌套

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

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

顯示效果如下所示:

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

Markdown 圖片

Markdown 圖片語法格式如下:

![屬性文本](圖片地址)
![屬性文本](圖片地址 "可選標題")
  • 開頭一個感嘆號 !
  • 接著一個方括號,里面放上圖片的替代文字
  • 接著一個普通括號,里面放上圖片的網(wǎng)址,最后還可以用引號包住并加上選擇性的 'title' 屬性的文字。

顯示效果如下所示:


氣球

Markdown 還沒有辦法指定圖片的高度與寬度,如果你需要的話,你可以使用普通的 <img> 標簽。

<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606320455463&di=cbb2b7ee092d955b8a2b576abd4b53d0&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F16%2F09%2F09%2F2157d2ba871765e.jpg" alt="氣球" width="30%" />

顯示效果如下所示:


使用img標簽控制氣球的大小.png

Markdown 區(qū)塊引用

>這是區(qū)塊引用示例

另外區(qū)塊引用是可以嵌套的,一個 > 符號是最外層,兩個 > 符號是第一層嵌套,以此類推:

“>”后無需加空格。

顯示效果如下所示:

這是區(qū)塊引用示例

最外層

第一層嵌套

第二層嵌套

Markdown 內(nèi)聯(lián)代碼

`內(nèi)聯(lián)代碼`

顯示效果如下所示:

git clone

Markdown 下劃線

<u>下劃線</u>

顯示效果如下所示:


下劃線.png

Markdown 刪除線

~~刪除線~~

顯示效果如下所示:

這是刪除線

Markdown 分割線

你可以在一行中用三個以上的星號、減號、底線來建立一個分隔線,行內(nèi)不能有其他東西。你也可以在星號或是減號中間插入空格。下面每種寫法都可以建立分隔線。

***

* * *

*****

- - -

----------

---

顯示效果如下所示:







Markdown 腳注

腳注是對文本的補充說明。

Markdown 腳注的格式如下:

[^要注明的文本]

顯示效果如下所示:

今天天氣怎么樣 [1]。

MarkDown 文本

1. 斜體文本

*斜體文本1*
_斜體文本2_

顯示效果如下所示:
斜體文本1
斜體文本2

2. 加粗文本

**加粗文本** 或 __加粗文本__,加粗文本用兩個*或兩個_包圍文本。
加粗斜體則用三個*或三個_包圍文本。

例如:
**加粗字體1**
__加粗字體2__

***加粗斜體文本1***
___加粗斜體文本2___

顯示效果如下所示:
加粗字體1
加粗字體2

加粗斜體文本1
加粗斜體文本2

3. 更改字體、大小、顏色

<font face="黑體">我是黑體字</font>
<font face="微軟雅黑">我是微軟雅黑</font>
<font face="STCAIYUN">我是華文彩云</font>
<font color=red>我是紅色</font>
<font color=#008000>我是綠色</font>
<font color=Blue>我是藍色</font>
<font size=5>我是尺寸</font>
<font face="黑體" color=green size=5>我是黑體,綠色,尺寸為5</font>

顯示效果如下所示:


字體的樣式與大小與顏色.png

4. 為文本添加背景色

<table><tr><td bgcolor=green>背景色yellow</td></tr></table>

顯示效果如下所示:


綠色背景.png

Markdown 表格

Markdown 制作表格使用 | 來分隔不同的單元格,使用 - 來分隔表頭和其他行。

|  表頭   | 表頭  |
|  ----  | ----  |
| 單元格  | 單元格 |
| 單元格  | 單元格 |

顯示效果如下所示:

表頭 表頭
單元格 單元格
單元格 單元格

對齊方式

我們可以設(shè)置表格的對齊方式:

  • -: 設(shè)置內(nèi)容和標題欄居右對齊。

  • :- 設(shè)置內(nèi)容和標題欄居左對齊。

  • :-: 設(shè)置內(nèi)容和標題欄居中對齊。

設(shè)置如下:

| 左對齊 | 右對齊 | 居中對齊 |
| :-----| ----: | :----: |
| 單元格 | 單元格 | 單元格 |
| 單元格 | 單元格 | 單元格 |

顯示效果如下所示:

左對齊 右對齊 居中對齊
單元格 單元格 單元格
單元格 單元格 單元格

Markdown 上下標

上標:H<sub>2</sub>O
下標:x<sup>2</sup>

顯示效果如下所示:
上標:H2O
下標:x2

Markdown 勾選框

- [x] task list 1
- [x] task list 2
- [x] task list 3
    - [ ] task list 3-1
    - [ ] task list 3-2
    - [ ] task list 3-3

顯示效果如下所示:

勾選框.png

Markdown 轉(zhuǎn)義

Markdown 使用了很多特殊符號來表示特定的意義,如果需要顯示特定的符號則需要使用轉(zhuǎn)義字符,Markdown 使用反斜杠轉(zhuǎn)義特殊字符:

**正常顯示星號** 
\*\* 正常顯示星號 \*\*

顯示效果如下所示:

正常顯示星號
** 正常顯示星號 **

Markdown 支持以下這些符號前面加上反斜杠來幫助插入普通的符號:

\   反斜線
`   反引號
*   星號
_   下劃線
{}  花括號
[]  方括號
()  小括號
#   井字號
+   加號
-   減號
.   英文句點
!   感嘆號

Markdown 支持的 HTML 元素

不在 Markdown 涵蓋范圍之內(nèi)的標簽,都可以直接在文檔里面用 HTML 撰寫。

目前支持的 HTML 元素有:<kbd> <b> <i> <em> <sup> <sub> <br>等 ,如:

使用 <kbd>Command</kbd>+<kbd>C鍵</kbd> 將所選項拷貝到剪貼板

顯示效果如下所示:


粘貼.png

Markdown 公式

當你需要在編輯器中插入數(shù)學(xué)公式時,可以使用兩個美元符 $$ 包裹 TeX 或 LaTeX 格式的數(shù)學(xué)公式來實現(xiàn)。舉例方程組公式,如下:

$$
\begin{cases}
a_1x+b_1y+c_1z=d_1\\
a_2x+b_2y+c_2z=d_2\\
a_3x+b_3y+c_3z=d_3\\
\end{cases}
$$
  • 方程組公式需要cases環(huán)境:起始、結(jié)束處以{cases}聲明。
    顯示效果如下所示:

\begin{cases} a_1x+b_1y+c_1z=d_1\\ a_2x+b_2y+c_2z=d_2\\ a_3x+b_3y+c_3z=d_3\\ \end{cases}

Markdown 畫圖

1. 流程圖

\```mermaid
graph LR
A[方形] -->B(圓角)
    B --> C{條件a}
    C -->|a=1| D[結(jié)果1]
    C -->|a=2| E[結(jié)果2]
    F[橫向流程圖]
\```
  • 重要提示:上述"```mermaid":第一行內(nèi)容與最后一行內(nèi)容,表示當前使用的語言為mermaid。使用時請去掉 \ 反斜杠。
    顯示效果如下所示:


    流程圖.png

2. 時序圖(順序圖)

\```sequence
對象A->對象B: 對象B你好嗎?(請求)
Note right of 對象B: 對象B的描述
Note left of 對象A: 對象A的描述(提示)
對象B-->對象A: 我很好(響應(yīng))
對象A->對象B: 你真的好嗎?
\```
  • 重要提示:上述"```sequence":第一行內(nèi)容與最后一行內(nèi)容,表示當前使用的語言為sequence。使用時請去掉 \ 反斜杠。
    顯示效果如下所示:


    時序圖.png

3. 甘特圖

\```mermaid
%% 語法示例
gantt  
       dateFormat  YYYY-MM-DD   
       title 使用mermaid語言定制甘特圖

       section 普通任務(wù)
       已完成的任務(wù)                :done,    des1, 2021-01-06,2021-01-08
       正在進行的任務(wù)              :active,  des2, 2021-01-09, 3d
       待完成任務(wù)1                  :         des3, after des2, 5d
       待完成任務(wù)2                  :         des4, after des3, 5d

       section 關(guān)鍵任務(wù)
       已完成的關(guān)鍵任務(wù)           :crit, done, 2021-01-06,24h
       已完成的關(guān)鍵任務(wù)2          :crit, done, after des1, 2d
       正在進行的關(guān)鍵任務(wù)         :crit, active, 3d
       待完成的關(guān)鍵任務(wù)           :crit, 5d
       待完成任務(wù)                      :2d
       待完成任務(wù)2                     :1d

       section 文檔編寫
       描述甘特圖語法               :active, a1, after des1, 3d
       完成甘特圖實例1             :after a1  , 20h
       完成甘特圖實例2            :doc1, after a1  , 48h
\```
  • 重要提示:上述"```mermaid":第一行內(nèi)容與最后一行內(nèi)容,表示當前使用的語言為mermaid。使用時請去掉 \ 反斜杠。
    顯示效果如下所示:


    甘特圖.png

Markdown 參考


  1. 天氣晴朗! ?

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Markdown 是一種輕量級標記語言,它允許人們使用易讀易寫的純文本格式編寫文檔。Markdown 語言在 20...
    mis06閱讀 1,025評論 2 6
  • Markdown 教程 Markdown 是一種輕量級標記語言,它允許人們使用易讀易寫的純文本格式編寫文檔。 Ma...
    起源矢量閱讀 868評論 0 3
  • Markdown是一種可以使用普通文本編輯器編寫的標記語言,通過簡單的標記語法,可以使普通的文本內(nèi)容具有一定的格式...
    零幺幺幺閱讀 367評論 0 0
  • Markdown 標題 Markdown 標題有兩種格式。 1、使用 = 和 - 標記一級和二級標題 顯示效果如下...
    唐格陽閱讀 585評論 1 1
  • 久違的晴天,家長會。 家長大會開好到教室時,離放學(xué)已經(jīng)沒多少時間了。班主任說已經(jīng)安排了三個家長分享經(jīng)驗。 放學(xué)鈴聲...
    飄雪兒5閱讀 7,822評論 16 22

友情鏈接更多精彩內(nèi)容