markdown基本文法說明

來源:互聯網
上載者:User

標籤:

概述 簡單介紹Markdown

Markdown 是一種輕量級標記語言,它允許人們使用易讀易寫的純文字格式編寫文檔,然後轉換成格式豐富的HTML頁面。 —— 來自[維基百科]

簡單的來說,Markdown就是用“標記符號”表示“格式”。Markdown文法標籤與HTML文法標籤是一一對應的,比如Markdown的二級標題標籤##就對應著HTML中的<h2>...</h2>標記,而且Markdown是相容HTML文法的,如果你比較喜歡 HTML 的 <a> 或 <img> 標籤,可以直接在Markdown文檔中使用這些標記,而不用 Markdown 提供的連結或是映像標籤文法。 CSDN Markdown的功能支援

CSDN Markdown編輯器是使用StackEdit修改而來的,但在StackEdit的基礎上做了一些細節最佳化,使得體驗更加友好,CSDN Markdown支援的功能很多:

  • 即時效果預覽並自動滾動定位到編輯處(所見即所得 (WYSIWYG))
  • 支援 Markdown Extra / GitHub Flavored Markdown 擴充文法
  • 支援代碼文法高亮
  • 支援 LaTeX 數學公式(基於 MathJax)
  • 支援UML順序圖表和流程圖
  • 線上或離線管理多份 MarkDown 文檔
  • 支援離線編輯
  • 支援匯入線上和本地Markdown文檔進行編輯
  • 可以將編輯內容匯出為 Markdown,HTML檔案
  • 管理發行的文檔

在這篇文章,我先介紹CSDN Markdown的基本文法,我會從Markdown文法說明、例子、與其對應的HTML文法、例子效果、注意事項這幾個方面進行詳細介紹。後面會繼續介紹如何插入圖片、CSDN Markdown的擴充文法、如何寫數學公式和畫圖等相關的內容。 標題

Markdown 支援兩種形式的標題文法:Setext形式和atx形式。 Setext 形式

Markdown文法說明:

Setext 形式是採用底線的方式,利用若干個 = (最高階標題)和 - (第二階標題)完成。

例子:

這是標題1=============這是標題2-------------

對應的HTML文法:

<h1>這是標題1</h1><h2>這是標題2</h2>

效果:這是標題1這是標題2

注意事項:

這裡#或-的數目是任意的,既可以寫一個也可以寫多個。

atx形式

Markdown文法說明:

atx 形式則是在行首插入 1 到 6 個 # ,分別對應到標題 1 到 6 階。

例子:

# 這是標題1## 這是標題2### 這是標題3#### 這是標題4##### 這是標題5###### 這是標題6

轉化為HTML後分別對應<h1>...<h6>這6個標記。

效果:這是標題1這是標題2這是標題3這是標題4這是標題5這是標題6

注意事項:

  • Setext形式的標題只能表示標題1和標題2這兩階,而atx形式的標題可以表示標題1~標題6共6階。
  • 上面#與文本之間的空格不是必需的,不加也可以,但加上是個好的習慣。
  • 你可以選擇性地「閉合」atx樣式的標題,這純粹只是美觀用的,若是覺得這樣看起來比較舒適,你就可以在行尾加上 #,而行尾的 # 數量也不用和開頭一樣(行首的#數量決定標題的階數)。
區區塊引述

Markdown文法說明:

Markdown標記區區塊引述是使用 > 標記,一個段落既可以只用一個 >標記(放在段首,屬偷懶做法),也可以在一個段落的每一行前面加上 >。

例子:

> 這是一個區區塊引述。與上面文本屬於一個段落,因此這一行前面可以不加`>`標記。> 由於上面空了一行,因此這是另一個不同的段落,前面的 `>`必須添加。>雖然這也是另一個不同的段落,但上面空行加了 `>`,因此這裡段落之前的 `>`也可以省略,相當於上面空行的 `>`屬於這個段落。

對應的HTML文法:

<blockquote>    <p>這是一個區區塊引述。    與上面文本屬於一個段落,因此這一行前面可以不加`>`標記。</p>    <p>由於上面空了一行,因此這是另一個不同的段落,前面的 `>`必須   添加。</p>    <p>雖然這也是另一個不同的段落,但上面空行加了 `>`,因此這裡段落之前的 `>`也可以省略,相當於上面空行的 `>`屬於這個段落。</p></blockquote>

效果:

這是一個區區塊引述。
與上面文本屬於一個段落,因此這一行前面可以不加>標記。

由於上面空了一行,因此這是另一個不同的段落,前面的 >必須添加。

雖然這也是另一個不同的段落,但上面空行加了 >,因此這裡段落之前的 >也可以省略,相當於上面空行的 >屬於這個段落。

注意事項:

區區塊引述可以嵌套使用,即引用內的引用,只要根據層次加上不同數量的 > 即可,比如兩層就需要兩個> :

> 這是區區塊引述的第一層。>> > 這是嵌套引用,屬於第二層,因此需要再加一個`>`,兩個`>`之間的空格不是必需的。>> 回到區區塊引述的第一層。

效果為:

這是區區塊引述的第一層。

這是嵌套引用,屬於第二層,因此需要再加一個>,兩個>之間的空格不是必需的。

回到區區塊引述的第一層。

引用的區塊內也可以使用其他的Markdown文法,包括標題、列表、代碼塊等:

> ## 這是一個標題。> > 1. 這是第一個清單項目。> 2. 這是第二個清單項目。> > 這是一個代碼例子:> >     printf("Hello, Minmin!\n"); return 0;

效果為:

這是一個標題。
  1. 這是第一個清單項目。
  2. 這是第二個清單項目。

這是一個代碼例子:

printf("Hello, Minmin!\n"); return 0;
分隔線

Markdown文法說明:

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

例子:

* * *********- - ----------------------------------------

對應的HTML文法:

<hr />

效果:

注意事項:

從上面例子可以看出,三個以上的標記之間允許存在空格,而且這三種標記可以混用,只要三種數量加起來大於等於3即可,比如下面這樣:

**---*_***--_
強調

我們知道在HTML中起到強調作用的有兩個標籤:<em>和<strong> ,關於兩者的區別可以自行Google或看這篇文章「em和strong的區別」,Markdown中也有這兩種強調效果,使用的是星號*和底線_這兩種標記。

Markdown文法說明:

  • 使用一個 * 或 _ 來包圍詞句,相當於用 <em> 標籤包圍(內部就是這樣轉化的);
  • 使用兩個 * 或 _ 包起來的話,則相當於使用 <strong>。

例子:

*使用一個星號的強調*_使用一個 底線 的強調_**使用兩個星號的強調**__使用兩個底線 的強調__

對應的HTML文法:

<em>使用一個星號的強調</em><em>使用一個底線的強調</em><strong>使用兩個星號的強調</strong><strong>使用兩個底線的強調</strong>

效果:

使用一個星號的強調
使用一個底線的強調

使用兩個星號的強調
使用兩個底線 的強調

注意事項:

  • 這裡的**和__兩個相同的符號中間不能留有空白,否則它們就只會被當成普通的符號。
  • 注意<em>式的強調在不同的編輯器或瀏覽器裡可能顯示效果不一樣,有的通過斜體來強調,有的通過下劃點線來強調。
列表

Markdown 支援有序列表和無序列表兩種,且列表可以嵌套使用。無序列表

Markdown文法說明:

無序列表使用星號、加號或是減號作為列表標記,使用方法如下:

一個星號 / 一個加號 / 一個減號 + 若干個空格 + 清單項目內容

例子:

*   條目1*   條目2*   條目3

這等同於:

+   條目1+   條目2+   條目3

也等同於:

-   條目1-   條目2-   條目3

對應的HTML文法:

<ul>  <li>條目1</li>  <li>條目2</li>  <li>條目3</li></ul>

效果:

  • 條目1
  • 條目2
  • 條目3
有序列表

Markdown文法說明:

有序列表則直接使用數字作為列表標記,使用方法如下:

一個數字 + 一個英文句點 + 若干個空格 + 清單項目內容

例子:
1. 第1點描述
2. 第2點描述
3. 第3點描述

對應的HTML文法:

<ol>  <li>第1點描述</li>  <li>第2點描述</li>  <li>第3點描述</li></ol>

效果:

  1. 第1點描述
  2. 第2點描述
  3. 第3點描述
注意事項

(1)從有序列表所對應的HTML文法格式可以看出,你在有序列表標記上使用的數字並不會影響最終的按序輸出,即如果你的列表標記寫成:

1.  第1點描述1.  第2點描述1.  第3點描述

或甚至是:

4.  第1點描述2.  第2點描述9.  第3點描述

都會得到與上面完全相同的輸出,你可以完全不用在意數位正確性。

(2)列表標記後面一定要接著至少一個空格或定位字元,否則就是普通的文本而非列表了,即下面的寫法是列表不支援的:

*條目1*條目2*條目3

(3)如果列表條目間用空行分開,那麼在輸出時兩個條目之間也會有一個空行,而且若有多個條目,只要其中有一個空行,輸出結果時所有條目之間都會出現空行,保持一致性。比如:

*   條目1*   條目2*   條目3

輸出效果為:

  • 條目1

  • 條目2

  • 條目3

(4)每個列表條目下都可以包含多個段落,但這些段落都必須縮排 4 個空格或 1 個定位字元:

1.  這是一個有兩個段落的清單項目,這是第一段。    這是第二段,段首已經縮排 4 個空格或 1 個定位字元,否則就處在列表之外,自成一個普通段落,下面的列表條目也將自成另一個不同的列表,序號從1開始。2.  這是列表的第二個條目。

效果為:

  1. 這是一個有兩個段落的列表條目,這是第一段。

    這是第二段,段首已經縮排 4 個空格或 1 個定位字元,否則就處在列表之外,自成一個普通段落,下面的列表條目也將自成另一個不同的列表,序號從1開始。

  2. 這是列表的第二個條目。

(5) 如果要在列表條目內放進引用,那 > 就需要縮排:

*   含有引用的清單項目,下面是引用元素:     > 這是一條引用。     > 前面需要縮排4個空格或1個定位字元,跟段落一樣。

效果為:

  • 含有引用的列表條目,下面是引用元素:

    這是一條引用。
    前面需要縮排4 個空格或 1 個定位字元,跟段落一樣。

(6)如果要在清單項目內放代碼區塊的話,該區塊就需要縮排兩次,也就是8個空格或是2個定位字元:

*   含有代碼塊的清單項目:        #include <stdio.h>            int main(void) {                printf("Hello, Minmin!\n");                return 0;             }         }

效果為:

  • 含有代碼塊的清單項目:

    #include <stdio.h>    int main(void) {        printf("Hello, Minmin!\n");        return 0;    }}

(7)避免產生不必要的清單項目。
有時候,列表很可能會不小心產生,比如下面這樣的寫法:

1986. 這不是一個清單項目。

也會產生一個下面這樣的列表:

  1. 這不是一個清單項目。

換句話說,也就是在行首出現數字-句點-空白,要避免這樣的狀況,你可以在句點前面加上反斜線,具體可以查看後面的「反斜線的用處 」一節。

1986\. 這不是一個清單項目。

這樣就對了:

1986. 這不是一個清單項目。連結

Markdown的連結可分為自動連結和普通文本連結兩種類型。自動連結(可點擊的URL和Email)

Markdown支援以比較簡短的自動連結形式來處理網址和電子郵件信箱。

Markdown文法說明:

對於本身是個URL和Email的文本來說,只要是用角括弧包起來,Markdown就會自動把它轉成連結。

例子:

這是一個可點擊的URL:<http://www.csdn.net/>這是一個可點擊的Email:<[email protected]>

對應的HTML文法:

對於上面普通的URL,Markdown會轉成下面的HTML文法:

<a href="http://www.csdn.net/">http://www.csdn.net/</a>

而對於Email的自動連結也很類似,只是Markdown會先做一個編碼轉換的過程,把文字字元轉成 16 進位碼的 HTML 實體,這樣的格式可以糊弄一些不好的郵址收集機器人,例如對於上面的Email,Markdown 會轉成:

<a href="&#x6D;&#x61;i&#x6C;&#x74;&#x6F;:&#x61;&#x64;&#x64;&#x72;&#x65;      &#115;&#115;&#64;&#101;&#120;&#x61;&#109;&#x70;&#x6C;e&#x2E;&#99;&#111;&#109;">&#x61;&#x64;&#x64;&#x72;&#x65;&#115;&#115;&#64;&#101;&#120;&#x61;&#109;&#x70;&#x6C;e&#x2E;&#99;&#111;&#109;</a>

在瀏覽器裡面,這段字串會最終轉成下面的HTML文法:
[email protected]

效果:

這是一個可點擊的URL:
http://www.csdn.net/

這是一個可點擊的Email:
[email protected]

注意事項:

對於郵件的自動連結,使用Markdown文法雖然可以糊弄不少的機器人,但並不能全部擋下來,不過總比什麼都不做好些。不管怎樣,公開你的信箱終究會引來廣告信件的。

普通文本連結

Markdown支援兩種形式的普通文本連結文法: 行內式和參考式兩種形式。行內式連結

Markdown文法說明:

下面三種文法形式都是允許的:

[連結文字](連結URL ‘可選的連結title‘)[連結文字](連結URL "可選的連結title")[連結文字](連結URL (可選的連結title))

詳細說明就是:

  • 一個方括弧,裡面輸入連結文本;
  • 接著一個圓括弧,裡面可以包含兩部分內容,中間用空格隔開:
    • 【必須】連結的網址;
    • 【可選】連結的title文字,只要用單引號、雙引號或是括弧把title文字包起來即可,加上title後,你用滑鼠移到該連結文字時就會顯示title文字,可以把它當作一種提示資訊來用,當然你也可以不用title屬性。

例子:

更多精彩的內容,可以訪問[敏敏的CSDN部落格](http://blog.csdn.net/lanxuezaipiao/ "敏敏的部落格")(有title屬性) 。想更多的瞭解敏敏,可以訪問[敏敏的新浪微博](http://weibo.com/lanxuezaipiao/) (無title屬性)。

對應的HTML文法:

<p>更多精彩的內容,可以訪問 <a href="http://blog.csdn.net/lanxuezaipiao/" title="敏敏的部落格">敏敏的CSDN部落格</a>(有title屬性) 。</p><p>想更多的瞭解敏敏,可以訪問<a href="http://weibo.com/lanxuezaipiao/">敏敏的新浪微博</a> (無title屬性)。</p>

* 效果:*

更多精彩的內容,可以訪問敏敏的CSDN部落格 (有title屬性)。

想更多的瞭解敏敏,可以訪問敏敏的新浪微博 (無title屬性)。

注意事項:

如果你是要連結到同一個主機的資源,可以使用相對路徑,例如:

想要進一步瞭解,請訪問 [About](/about/) 頁。
參考式連結

Markdown文法說明:

[連結文字][連結id][連結id]: 真正的連結URL "可選的title"

可以發現參考式的連結中連結文字的後面不是一個圓括弧而是另一個方括弧,在該方括弧裡面要填入用以辨識連結的標記,注意兩個方括弧之間允許有空格,接著,在文檔的任意處,你可以把這個標記的連結內容定義出來。

連結內容定義的形式為:

  • 一個方括弧(前面可以選擇性地加上至多三個空格來縮排),裡面輸入上面的連結id
  • 接著一個冒號
  • 接著一個以上的空格或定位字元
  • 接著連結的網址
  • 選擇性地接著 title 內容,可以用單引號、雙引號或是括弧包著,與上面一樣

例子:

想知道敏敏都讀過哪些書、看過哪些電影嗎?請進入[敏敏的豆瓣][id]來瞭解下吧。[id]: http://www.douban.com/people/44971294/  "敏敏的豆瓣"  

對應的HTML文法:

<p>想知道敏敏都讀過哪些書、看過哪些電影嗎?請進入<a href="http://blog.csdn.net/lanxuezaipiao/" title="敏敏的豆瓣">敏敏的豆瓣</a>來瞭解下吧。</p>

效果:

想知道敏敏都讀過哪些書、看過哪些電影嗎?請進入敏敏的豆瓣來瞭解下吧。

注意事項:

(1)有一個已知的問題是 Markdown.pl 1.0.1 會忽略單引號包起來的連結 title,因此大家在使用時盡量選擇用雙引號或括弧,避免出錯。

(2) 連結網址也可以用角括弧包起來,如:

[id]: <http://www.douban.com/people/44971294/>  "敏敏的豆瓣"  

(3)你也可以把 title 屬性放到下一行,也可以加一些縮排,若網址太長的話,這樣會比較好看:

[id]: http://blog.csdn.net/lanxuezaipiao/article/details/42554035    "敏敏的2014年總結"

(4)網址定義只有在產生連結的時候用到,並不會直接出現在檔案之中,如上面的效果中沒有出現[id]:這樣的網址定義。

(5)連結辨別標籤可以有字母、數字、空白和標點符號,但是並不區分大小寫,因此下面兩個連結是一樣的:

[連結文本][a][連結文本][A]

(6)還有一種隱式連結標記功能,可以讓你省略指定連結標記,這種情形下,連結標記會視為等同於連結文字,要用隱式連結標記只要在連結文字後面加上一個空的方括弧,如果你要讓 “Google” 連結到 google.com,你可以簡化成:

[Google][]

然後定義連結內容:

[Google]: http://google.com/

(7)連結的定義可以放在檔案中的任何一個地方,我比較偏好直接放在連結出現段落的後面,你也可以把它放在檔案最後面,就像是註解一樣。

下面給出一個綜合性的範例,來比較下這幾種連結方式的差異:

採用行內式連結的方式:

我經常逛的網站或社區有: [CSDN](http://www.csdn.net/ "CSDN")、[知乎] (http://www.zhihu.com/ "知乎")還有[豆瓣](http://www.douban.com/  "豆瓣")。

採用參考式連結的方式:

我經常逛的網站或社區有: [CSDN] [1]、[知乎] [2] 還有[豆瓣] [3]。  [1]: http://www.csdn.net/   "CSDN"  [2]: http://www.zhihu.com/  "知乎"  [3]: http://www.douban.com/    "豆瓣"

採用連結名稱的方式:

 我經常逛的網站或社區有: [CSDN] []、[知乎] [] 還有[豆瓣] []。  [csdn]: http://www.csdn.net/   "CSDN"  [知乎]: http://www.zhihu.com/  "知乎"  [豆瓣]: http://www.douban.com/    "豆瓣"

上面三種寫法產生的效果都一樣:

我經常逛的網站或社區有: CSDN、知乎 還有豆瓣。

那麼現在一個問題來了:這三種寫法到底該如何選用呢?哪種寫法最好?

我個人認為這是自己的喜好問題,你看哪個寫的舒服就選用哪個方法?不過從官方來看,較推薦參考式的連結寫法。參考式的連結其實重點不在於它比較好寫,而是它比較好讀,比較一下上面的範例,使用參考式的文章本身讀起來很簡潔(因為連結標記單獨成段了),但是用行內形式的看起來就很臃腫,還容易看錯。

使用 Markdown 的參考式連結,可以讓檔案更像是瀏覽器最後產生的結果,讓你可以把一些標記相關的中繼資料移到段落文字之外,你就可以增加連結而不讓文章的閱讀感覺被打斷。代碼

關於Markdown的代碼文法,下面分為行內代碼和代碼區塊兩類來說明。行內代碼

Markdown文法說明:

如果要標記一小段行內代碼,你可以用反引號(就是跟~在一起的那個按鍵)把它包起來(`)即可:

`你要標記的行內代碼`

例子:

讓我們看看`printf()` 函數有哪些參數。

對應的HTML文法:

<p>讓我們看看<code>printf()</code> 函數有哪些參數。</p>

效果:

讓我們看看printf() 函數有哪些參數。

注意事項:

  • 如果要在行程式碼片段插入入反引號,你可以用多個反引號來開啟和結束程式碼片段:

    這是一個反引號 (`)。

    就能正常輸出反引號:

    這是一個反引號 (`)。

  • 如果要在程式碼片段的起始處或結尾處插入一個正常的反引號,這時會有連續三個反引號連在一塊的情況,且達不到想要的效果。這時就需要在程式碼片段的起始和結束端各放入一個空白,開始端點後面一個,結束端前面一個,例如:

    這是程式碼片段中的反引號:`

    這樣就能產生想要的效果:

    這是程式碼片段中的反引號:`

代碼區塊

和程式相關的寫作通常會有已經排版好的代碼區塊,通常這些區塊我們並不希望它以一般段落檔案的方式去排版(如果用一般段落的方式那麼段首所有的空格都被消除了),而是照原來的樣子顯示,Markdown 會用 <pre> 和 <code> 標籤來把代碼區塊包起來。

Markdown文法說明:

要在 Markdown 中建立代碼區塊很簡單,只要簡單地縮排 4 個空格或是 1 個定位字元就可以。

例子:

這是一個普通段落:    這是一個代碼區塊。

對應的HTML文法:

<p>這是一個普通段落:</p><pre><code>這是一個代碼區塊。</code></pre>

這個每行一階的縮排(4 個空格或是 1 個定位字元),都會被移除,舉一個具體的代碼執行個體。

例子:

下面是一個簡單的Java執行個體:    public class Test{          public static void main (String[] args){              System.out.println("歡迎訪問lanxuezaipiao!");         }

效果:

下面是一個簡單的Java執行個體:

public class Test{      public static void main (String[] args){          System.out.println("歡迎訪問lanxuezaipiao!");     }

注意事項:

在代碼區塊中,一般的 Markdown 文法不會被轉換,像是星號便只是星號,即用兩個星號將一句話包圍起來也不會轉化為強調,這表示你可以很容易地以 Markdown 文法撰寫 Markdown 文法相關的檔案,不用擔心代碼中包含一些特殊的Markdown文法標記。

反斜線的用處

Markdown可以利用反斜線來插入一些在文法中有其它意義的符號,例如:如果你想要用星號加在文字旁邊的方式來做出強調效果,你可以在星號的前面加上反斜線:

\*重點描述文本\*

效果就是:*重點描述文本*

Markdown支援以下這些符號前面加上反斜線來協助插入普通的符號而非Markdown文法標籤:

\   反斜線`   反引號*   星號_   底線{}  花括弧[]  方括弧()  括弧#   井號+   加號-   減號.   英文句點!   驚歎號
常見問題

問題1:Markdown如何添加多個空行?

我們知道Markdown的段落是由前後各一個空行形成,人為的添加多個空行會被Markdown文法自動忽略僅剩一個空行,這是比較人性化的,因為不需要人為刪除一些多餘的空行了。但兩個段落之間也有需要多個空行的情況,比如上面給出一些謎題,謎底一般放在最下面,中間需要大部分的留白,這時候就需要藉助HTML換列標籤來達到這個目的了(前面已經提過Markdown文法是相容HTML的):即在需要空行的地方插入 <br /> 標籤或 <p> 標籤。

大家如果有其它任何問題,可以在下面留言,我會將大家提問的問題都整理到這裡來。

markdown基本文法說明

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.