博客 / 詳情

返回

Markdown 常用語法詳解(圖文並茂)

一、序言

當你看到這篇文章時,很可能已經在使用 Markdown 了——無論你是否意識到。那些在 GitHub 上簡潔的 README、技術博客裏的優雅排版、甚至 AI 回覆中清晰的結構,背後都是同一套輕巧的標記語言。

它誕生於 2004 年,初衷只是“讓人們更專注於寫作而非排版”。二十多年後的今天,這個用幾個符號就能定義結構的純文本格式,卻意外成為了數字時代最高效的通用語。

從代碼文檔到日常筆記,從團隊協作到 AI 對話,Markdown 正在重新定義我們組織思想的方式。它不捆綁任何軟件,卻能在任何設備上生存;它簡單到十分鐘就能掌握,卻強大到足以構建整個知識體系。

二、常用語法詳解

1、標題語法

1.1、常用語法(推薦)

要創建標題,請在單詞或短語前面添加井號 (#) 。# 的數量代表了標題的級別。例如,添加三個 # 表示創建一個三級標題 (<h3>) (例如:### My Header)。 

示例:

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

image

1.2、可選語法(不推薦)

還可以在文本下方添加任意數量的 = 號來標識一級標題,或者 - 號來標識二級標題。 

示例:

這是一級標題
==

這是二級標題
---

image

1.3、最佳實踐

不同的 Markdown 應用程序處理 # 和標題之間的空格方式並不一致。為了兼容考慮,請用一個空格在 # 和標題之間進行分隔。 

2、列表語法

2.1、有序列表 

要創建有序列表,請在每個列表項前添加數字並緊跟一個英文句點。數字不必按數學順序排列,但是列表應當以數字 1 起始。

示例1:

1. First item
2. Second item
3. Third item
4. Fourth item

image

示例2:

1. First item
8. Second item
3. Third item
5. Fourth item

image

示例3:

1. First item
2. Second item
3. Third item
    1. Indented item
    2. Indented item
4. Fourth item

image

2.2、無序列表

要創建無序列表,請在每個列表項前面添加 減號 (-)、星號 (*) 或加號 (+) 。縮進一個或多個列表項可創建嵌套列表。個人推薦用減號 (-)。

示例1:

- First item
- Second item
- Third item
- Fourth item

image

示例2:

* First item
* Second item
* Third item
* Fourth item

image

示例3:

+ First item
+ Second item
+ Third item
+ Fourth item

image

示例4: 

- First item
- Second item
- Third item
    - Indented item
    - Indented item
- Fourth item

image

2.3、在列表中嵌套其他元素

要在保留列表連續性的同時在列表中添加另一種元素,請將該元素縮進四個空格或一個製表符,如下例所示:

2.3.1、段落

*   This is the first list item.
*   Here's the second list item.

    I need to add another paragraph below the second list item.

*   And here's the third list item.

image

2.3.2、引用塊

*   This is the first list item.
*   Here's the second list item.

    > A blockquote would look great below the second list item.

*   And here's the third list item.

image

2.3.3、列表

你可以在有序列表中嵌套一個無序列表,反之亦然。

示例:

1. First item
2. Second item
3. Third item
    - Indented item
    - Indented item
4. Fourth item

image

2.3.4、代碼塊

代碼塊通常採用四個空格或一個製表符縮進。當它們被放在列表中時,請將它們縮進八個空格或兩個製表符。

1.  Open the file.
2.  Find the following code block on line 21:

        &lt;html>
          &lt;head>
            &lt;title>Test&lt;/title>
          &lt;/head>

3.  Update the title to match the name of your website.

image

2.3.5、圖片

1.  Open the file containing the Linux mascot.
2.  Marvel at its beauty.

    ![博客園logo](https://www.cnblogs.com/images/logo_small.gif)

3.  Close the file.

image

3、段落語法

要創建段落,請使用空白行將一行或多行文本進行分隔。

I really like using Markdown.

I think I'll use it to format all of my documents from now on.

image

段落(Paragraph)用法的最佳實踐:

不要用空格(spaces)或製表符( tabs)縮進段落。

4、換行語法

在一行的末尾添加兩個或多個空格,然後按回車鍵,即可創建一個換行(<br>)。

This is the first line.<br>
And this is the second line.

image

換行(Line Break)用法的最佳實踐:

幾乎每個 Markdown 應用程序都支持兩個或多個空格進行換行,稱為 結尾空格(trailing whitespace) 的方式,但這是有爭議的,因為很難在編輯器中直接看到空格,並且很多人在每個句子後面都會有意或無意地添加兩個空格。由於這個原因,你可能要使用除結尾空格以外的其它方式來換行。幸運的是,幾乎每個 Markdown 應用程序都支持另一種換行方式:HTML 的 <br> 標籤。

為了兼容性,請在行尾添加“結尾空格”或 HTML 的 <br> 標籤來實現換行。

5、強調語法

通過將文本設置為粗體斜體來強調其重要性。 

5.1、粗體(Bold) 

要加粗文本,請在單詞或短語的前後各添加兩個星號(asterisks)或兩個下劃線(underscores)。如需加粗一個單詞或短語的中間部分用以表示強調的話,請在要加粗部分的兩側各添加兩個星號(asterisks)。 

I just love **bold text**.

I just love __bold text__.

Love**is**bold

image

粗體(Bold)用法最佳實踐: 

Markdown 應用程序在如何處理單詞或短語中間的下劃線上並不一致。為兼容考慮,在單詞或短語中間部分加粗的話,請使用星號(asterisks)。 

image

5.2、斜體(Italic)

要用斜體顯示文本,請在單詞或短語前後添加一個星號(asterisk)或一個下劃線(underscore)。要斜體突出單詞的中間部分,請在字母前後各添加一個星號,中間不要帶空格。

Italicized text is the *cat's meow*.

Italicized text is the _cat's meow_.

A*cat*meow

image

斜體(Italic)用法的最佳實踐: 

要同時用粗體和斜體突出顯示文本,請在單詞或短語的前後各添加三個星號三個下劃線。要加粗並用斜體顯示單詞或短語的中間部分,請在要突出顯示的部分前後各添加三個星號,中間不要帶空格。

image

5.3、粗體(Bold)和斜體(Italic)

要同時用粗體和斜體突出顯示文本,請在單詞或短語的前後各添加三個星號三個下劃線。要加粗並用斜體顯示單詞或短語的中間部分,請在要突出顯示的部分前後各添加三個星號,中間不要帶空格。 

This text is ***really important***.

This text is ___really important___.

This text is __*really important*__.

This text is **_really important_**.

This is really***very***important text.

image

粗體(Bold)和斜體(Italic)用法的最佳實踐: 

Markdown 應用程序在處理單詞或短語中間添加的下劃線上並不一致。為了實現兼容性,請使用星號將單詞或短語的中間部分加粗並以斜體顯示,以示重要。 

image

6、區塊引用語法

6.1、單個段落的塊引用

要創建塊引用,請在段落前添加一個 > 符號。 

> Dorothy followed her through many of the beautiful rooms in her castle.

image

6.2、多個段落的塊引用

塊引用可以包含多個段落。為段落之間的空白行添加一個 > 符號。

> Dorothy followed her through many of the beautiful rooms in her castle.
>
> The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.

image

6.3、嵌套塊引用

塊引用可以嵌套。在要嵌套的段落前添加一個 >> 符號。 

> Dorothy followed her through many of the beautiful rooms in her castle.
>
>> The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.

image

6.4、帶有其它元素的塊引用

塊引用可以包含其他 Markdown 格式的元素。並非所有元素都可以使用,你需要進行實驗以查看哪些元素有效。

> #### The quarterly results look great!
>
> - Revenue was off the chart.
> - Profits were higher than ever.
>
>  *Everything* is going according to **plan**.

image

7、代碼語法

7.1、行內代碼

要將單詞或短語表示為代碼,請將其包裹在反引號 (`) 中。

At the command prompt, type `nano`.

image

7.2、轉義反引號

如果你要表示為代碼的單詞或短語中包含一個或多個反引號,則可以通過將單詞或短語包裹在雙反引號(``)中。 

``Use `code` in your Markdown file.``

image

7.3、代碼塊

Markdown基本語法允許您通過將行縮進四個空格或一個製表符來創建代碼塊。如果發現不方便,請嘗試使用受保護的代碼塊。根據Markdown處理器或編輯器的不同,您將在代碼塊之前和之後的行上使用三個反引號(```)或三個波浪號(~~~)。

```
{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}
```

image

語法高亮:

許多Markdown處理器都支持受圍欄代碼塊的語法突出顯示。使用此功能,您可以為編寫代碼的任何語言添加顏色突出顯示。要添加語法突出顯示,請在受防護的代碼塊之前的反引號旁邊指定一種語言

```json
{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}
```

image

8、分隔線語法

要創建分隔線,請在單獨一行上使用三個或多個星號 (***)、破折號 (---) 或下劃線 (___) ,並且不能包含其他內容。

***
---
___

image

分隔線(Horizontal Rule)用法最佳實踐:

為了兼容性,請在分隔線的前後均添加空白行。

Try to put a blank line before...

---

...and after a horizontal rule.

image

image

9、鏈接語法

9.1、常用語法

鏈接文本放在中括號內,鏈接地址放在後面的括號中,鏈接title可選。

超鏈接Markdown語法代碼:[超鏈接顯示名](超鏈接地址 "超鏈接title")

對應的HTML代碼:<a href="超鏈接地址" title="超鏈接title">超鏈接顯示名</a>

這是一個鏈接 [Markdown語法](https://markdown.com.cn)。

image

9.2、給鏈接增加 Title

鏈接title是當鼠標懸停在鏈接上時會出現的文字,這個title是可選的,它放在圓括號中鏈接地址後面,跟鏈接地址之間以空格分隔。

這是一個鏈接 [Markdown語法](https://markdown.com.cn "最好的markdown教程")。

image

9.3、網址和Email地址

使用尖括號可以很方便地把URL或者email地址變成可點擊的鏈接。

<https://markdown.com.cn>

<fake@example.com>

image

9.4、帶格式化的鏈接

強調 鏈接, 在鏈接語法前後增加星號。 要將鏈接表示為代碼,請在方括號中添加反引號。

I love supporting the **[EFF](https://eff.org)**.<br>
This is the *[Markdown Guide](https://www.markdownguide.org)*.<br>
See the section on [`code`](#code).

image

10、圖片語法

10.1、常用語法

要添加圖像,請使用感嘆號 (!), 然後在方括號增加替代文本,圖片鏈接放在圓括號裏,括號裏的鏈接後可以增加一個可選的圖片標題文本。

插入圖片Markdown語法代碼:![圖片alt](圖片鏈接 "圖片title")。

對應的HTML代碼:<img src="圖片鏈接" alt="圖片alt" title="圖片title">

![這是圖片](/assets/img/philly-magic-garden.jpg "Magic Gardens")

10.2、鏈接圖片

給圖片增加鏈接,請將圖像的Markdown 括在方括號中,然後將鏈接添加在圓括號中。

[![沙漠中的岩石圖片](/assets/img/shiprock.jpg "Shiprock")](https://markdown.com.cn)
[![博客園logo](https://www.cnblogs.com/images/logo_small.gif "logo_small")](https://markdown.com.cn)

image

11、轉義字符語法

要顯示原本用於格式化 Markdown 文檔的字符,請在字符前面添加反斜槓字符 \

\* Without the backslash, this would be a bullet in an unordered list.

image

11.1、可做轉義的字符

以下列出的字符都可以通過使用反斜槓字符(\)從而達到轉義目的。

image

11.2、特殊字符自動轉義

在 HTML 文件中,有兩個字符需要特殊處理: < 和 & 。 < 符號用於起始標籤,& 符號則用於標記 HTML 實體,如果你只是想要使用這些符號,你必須要使用實體的形式,像是 &lt; 和 &amp;

Markdown 允許你直接使用這些符號,它幫你自動轉義字符。

http://images.google.com/images?num=30&q=larry+bird

4 < 5

image

12、刪除線語法

您可以通過在單詞中心放置一條水平線來刪除單詞。結果看起來像這樣。此功能使您可以指示某些單詞是一個錯誤,要從文檔中刪除。若要刪除單詞,請在單詞前後使用兩個波浪號~~

~~世界是平坦的。~~ 我們現在知道世界是圓的。

image

13、網址鏈接語法

13.1、自動網址鏈接

許多Markdown處理器會自動將URL轉換為鏈接。這意味着如果您輸入http://www.example.com,即使您未使用方括號,您的Markdown處理器也會自動將其轉換為鏈接。

http://www.example.com

image

13.2、禁用自動URL鏈接

如果您不希望自動鏈接URL,則可以通過將URL表示為帶反引號的代碼來刪除該鏈接。

`http://www.example.com`

image

14、表格語法

要添加表,請使用三個或多個連字符(---)創建每列的標題,並使用管道(|)分隔每列。您可以選擇在表的任一端添加管道。

| Syntax      | Description |
| ----------- | ----------- |
| Header      | Title       |
| Paragraph   | Text        |

image

單元格寬度可以變化,如下所示。呈現的輸出將看起來相同。

| Syntax      | Description |
| ----------- | ----------- |
| Header      | Title       |
| Paragraph   | Text        |

| Syntax | Description |
| --- | ----------- |
| Header | Title |
| Paragraph | Text |

image

14.1、對齊

您可以通過在標題行中的連字符的左側,右側或兩側添加冒號(:),將列中的文本對齊到左側,右側或中心。

| Syntax      | Description | Test Text     |
| :---        |    :----:   |          ---: |
| Header      | Title       | Here's this   |
| Paragraph   | Text        | And more      |

image

14.2、格式化表格中的文字

您可以在表格中設置文本格式。例如,您可以添加鏈接,代碼(僅反引號(`)中的單詞或短語,而不是代碼塊)和強調。 

您不能添加標題,塊引用,列表,水平規則,圖像或HTML標籤。 

14.3、在表中轉義管道字符

您可以使用表格的HTML字符代碼(&#124;)在表中顯示豎線(|)字符。 

 

本文用的演示工具為:DevToys

image

這是一款開發人員工具,非常契合開發者的日常使用需要,可以直接去微軟應用商店下載。

Markdown 在線編輯器:https://markdown.com.cn/editor/

 

本文大部分內容摘錄自 Markdown 教程:https://markdown.com.cn/basic-syntax/

參考文獻:

Markdown 教程:https://markdown.com.cn/basic-syntax/

Markdown 中文網:https://www.markdown.cn/docs/tutorial-basics/basic-syntax

 

此文由博主精心撰寫轉載請保留此原文鏈接:https://www.cnblogs.com/xyh9039/p/19373821

版權聲明:如有雷同純屬巧合,如有侵權請及時聯繫本人修改,謝謝!!!

user avatar
0 位用戶收藏了這個故事!

發佈 評論

Some HTML is okay.