Markdown 語法手冊

Markdown 語法手冊 (完整整理版)

原創(chuàng) 2016年09月15日 22:35:35

0. 目錄


1. 斜體和粗體

代碼:

<pre class="prettyprint linenums prettyprinted" name="code" style="margin: 0px 0px 10px; padding: 18px; font-weight: 400; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; border: 1px solid rgb(225, 225, 232); background-color: rgb(247, 247, 249); font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 18px; line-height: 30px; color: rgb(51, 51, 51); white-space: pre-wrap; word-break: break-all; word-wrap: break-word;">

  1. *斜體*或_斜體_
  2. **粗體**
  3. ***加粗斜體***
  4. ~~刪除線~~

</pre>

顯示效果:

  • 這是一段斜體
  • 這是一段粗體
  • 這是一段加粗斜體
  • 這是一段刪除線

2. 分級標(biāo)題

第一種寫法:

<pre class="prettyprint linenums prettyprinted" name="code" style="margin: 0px 0px 10px; padding: 18px; font-weight: 400; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; border: 1px solid rgb(225, 225, 232); background-color: rgb(247, 247, 249); font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 18px; line-height: 30px; color: rgb(51, 51, 51); white-space: pre-wrap; word-break: break-all; word-wrap: break-word;">

  1. 這是一個一級標(biāo)題

  2. ============================

  3. 這是一個二級標(biāo)題

  4. --------------------------------------------------

</pre>

第二種寫法:

<pre class="prettyprint linenums prettyprinted" name="code" style="margin: 0px 0px 10px; padding: 18px; font-weight: 400; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; border: 1px solid rgb(225, 225, 232); background-color: rgb(247, 247, 249); font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 18px; line-height: 30px; color: rgb(51, 51, 51); white-space: pre-wrap; word-break: break-all; word-wrap: break-word;">

  1. # 一級標(biāo)題
  2. ## 二級標(biāo)題
  3. ### 三級標(biāo)題
  4. #### 四級標(biāo)題
  5. ##### 五級標(biāo)題
  6. ###### 六級標(biāo)題

</pre>

由于用了[TOC]標(biāo)記編輯器會把所有標(biāo)題寫到目錄大綱中,在這里寫的演示標(biāo)題也會列進(jìn)去,所以就不演示了。同學(xué)們自己在編輯器中觀察,很簡單,一級標(biāo)題字號最大,依級遞減。


3. 超鏈接

Markdown 支持兩種形式的鏈接語法: 行內(nèi)式和參考式兩種形式,行內(nèi)式一般使用較多。

3.1. 行內(nèi)式

語法說明:

  • []里寫鏈接文字,()里寫鏈接地址, ()中的”“中可以為鏈接指定title屬性,title屬性可加可不加。title屬性的效果是鼠標(biāo)懸停在鏈接上會出現(xiàn)指定的 title文字。[鏈接文字](鏈接地址 “鏈接標(biāo)題”)’這樣的形式。鏈接地址與鏈接標(biāo)題前有一個空格。

代碼:

<pre class="prettyprint linenums prettyprinted" name="code" style="margin: 0px 0px 10px; padding: 18px; font-weight: 400; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; border: 1px solid rgb(225, 225, 232); background-color: rgb(247, 247, 249); font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 18px; line-height: 30px; color: rgb(51, 51, 51); white-space: pre-wrap; word-break: break-all; word-wrap: break-word;">

  1. 歡迎來到[梵居鬧市](http://blog.leanote.com/freewalk)

  2. 歡迎來到[梵居鬧市](http://blog.leanote.com/freewalk "梵居鬧市")

</pre>

顯示效果:

歡迎來到梵居鬧市

歡迎來到梵居鬧市

3.2. 參考式

參考式超鏈接一般用在學(xué)術(shù)論文上面,或者另一種情況,如果某一個鏈接在文章中多處使用,那么使用引用 的方式創(chuàng)建鏈接將非常好,它可以讓你對鏈接進(jìn)行統(tǒng)一的管理。

語法說明:
參考式鏈接分為兩部分,文中的寫法 [鏈接文字][鏈接標(biāo)記],在文本的任意位置添加[鏈接標(biāo)記]:鏈接地址 “鏈接標(biāo)題”,鏈接地址與鏈接標(biāo)題前有一個空格。

如果鏈接文字本身可以做為鏈接標(biāo)記,你也可以寫成[鏈接文字][]
[鏈接文字]:鏈接地址的形式,見代碼的最后一行。

代碼:

<pre class="prettyprint linenums prettyprinted" name="code" style="margin: 0px 0px 10px; padding: 18px; font-weight: 400; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; border: 1px solid rgb(225, 225, 232); background-color: rgb(247, 247, 249); font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 18px; line-height: 30px; color: rgb(51, 51, 51); white-space: pre-wrap; word-break: break-all; word-wrap: break-word;">

  1. 我經(jīng)常去的幾個網(wǎng)站[Google][1]、[Leanote][2]以及[自己的博客][3]

  2. [Leanote 筆記][2]是一個不錯的[網(wǎng)站][]。

  3. [1]:http://www.google.com "Google"

  4. [2]:http://www.leanote.com "Leanote"

  5. [3]:http://http://blog.leanote.com/freewalk "梵居鬧市"

  6. [網(wǎng)站]:http://http://blog.leanote.com/freewalk

</pre>

顯示效果:

我經(jīng)常去的幾個網(wǎng)站Google、Leanote以及自己的博客
Leanote 筆記是一個不錯的網(wǎng)站。

3.3. 自動鏈接

語法說明:
Markdown 支持以比較簡短的自動鏈接形式來處理網(wǎng)址和電子郵件信箱,只要是用<>包起來, Markdown 就會自動把它轉(zhuǎn)成鏈接。一般網(wǎng)址的鏈接文字就和鏈接地址一樣,例如:

代碼:

<pre class="prettyprint linenums prettyprinted" name="code" style="margin: 0px 0px 10px; padding: 18px; font-weight: 400; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; border: 1px solid rgb(225, 225, 232); background-color: rgb(247, 247, 249); font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 18px; line-height: 30px; color: rgb(51, 51, 51); white-space: pre-wrap; word-break: break-all; word-wrap: break-word;">

  1. <http://example.com/>
  2. <address@example.com>

</pre>

顯示效果:

http://example.com/
address@example.com


4. 錨點(diǎn)

網(wǎng)頁中,錨點(diǎn)其實就是頁內(nèi)超鏈接,也就是鏈接本文檔內(nèi)部的某些元素,實現(xiàn)當(dāng)前頁面中的跳轉(zhuǎn)。比如我這里寫下一個錨點(diǎn),點(diǎn)擊回到目錄,就能跳轉(zhuǎn)到目錄。 在目錄中點(diǎn)擊這一節(jié),就能跳過來。還有下一節(jié)的注腳。這些根本上都是用錨點(diǎn)來實現(xiàn)的。

注意:
1. Markdown Extra 只支持在標(biāo)題后插入錨點(diǎn),其它地方無效。
2. Leanote 編輯器右側(cè)顯示效果區(qū)域暫時不支持錨點(diǎn)跳轉(zhuǎn),所以點(diǎn)來點(diǎn)去發(fā)現(xiàn)沒有跳轉(zhuǎn)不必驚慌,但是你發(fā)布成筆記或博文后是支持跳轉(zhuǎn)的。

語法描述:
在你準(zhǔn)備跳轉(zhuǎn)到的指定標(biāo)題后插入錨點(diǎn){#標(biāo)記},然后在文檔的其它地方寫上連接到錨點(diǎn)的鏈接。

代碼:

<pre class="prettyprint linenums prettyprinted" name="code" style="margin: 0px 0px 10px; padding: 18px; font-weight: 400; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; border: 1px solid rgb(225, 225, 232); background-color: rgb(247, 247, 249); font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 18px; line-height: 30px; color: rgb(51, 51, 51); white-space: pre-wrap; word-break: break-all; word-wrap: break-word;">

  1. ## 0\. 目錄{#index}

  2. 跳轉(zhuǎn)到[目錄](#index)

</pre>

顯示效果:

跳轉(zhuǎn)到目錄


5. 列表

5.1. 無序列表

使用 *,+,- 表示無序列表。

代碼:

<pre class="prettyprint linenums prettyprinted" name="code" style="margin: 0px 0px 10px; padding: 18px; font-weight: 400; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; border: 1px solid rgb(225, 225, 232); background-color: rgb(247, 247, 249); font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 18px; line-height: 30px; color: rgb(51, 51, 51); white-space: pre-wrap; word-break: break-all; word-wrap: break-word;">

  1. - 無序列表項 一
  2. - 無序列表項 二
  3. - 無序列表項 三

</pre>

顯示效果:

  • 無序列表項 一
  • 無序列表項 二
  • 無序列表項 三

5.2. 有序列表

有序列表則使用數(shù)字接著一個英文句點(diǎn)。

代碼:

<pre class="prettyprint linenums prettyprinted" name="code" style="margin: 0px 0px 10px; padding: 18px; font-weight: 400; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; border: 1px solid rgb(225, 225, 232); background-color: rgb(247, 247, 249); font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 18px; line-height: 30px; color: rgb(51, 51, 51); white-space: pre-wrap; word-break: break-all; word-wrap: break-word;">

  1. 1. 有序列表項 一
  2. 2. 有序列表項 二
  3. 3. 有序列表項 三

</pre>

顯示效果:

  1. 有序列表項 一
  2. 有序列表項 二
  3. 有序列表項 三

5.3. 定義型列表

語法說明:

定義型列表由名詞和解釋組成。一行寫上定義,緊跟一行寫上解釋。解釋的寫法:緊跟一個縮進(jìn)(Tab)

代碼:

<pre class="prettyprint linenums prettyprinted" name="code" style="margin: 0px 0px 10px; padding: 18px; font-weight: 400; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; border: 1px solid rgb(225, 225, 232); background-color: rgb(247, 247, 249); font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 18px; line-height: 30px; color: rgb(51, 51, 51); white-space: pre-wrap; word-break: break-all; word-wrap: break-word;">

  1. Markdown

  2. : 輕量級文本標(biāo)記語言,可以轉(zhuǎn)換成html,pdf等格式(左側(cè)有一個可見的冒號和四個不可見的空格)

  3. 代碼塊 2

  4. : 這是代碼塊的定義(左側(cè)有一個可見的冒號和四個不可見的空格)

  5. 代碼塊(左側(cè)有八個不可見的空格)

</pre>

顯示效果:

<dl style="margin: 24px 24px 20px; padding: 0px; font-weight: 400; box-sizing: border-box; list-style: none; font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-size: 18px; line-height: 30px; word-wrap: break-word; color: rgb(51, 51, 51);">

<dt style="margin: 8px; padding: 0px; font-weight: bold; box-sizing: border-box; list-style: none; word-wrap: break-word;">Markdown</dt>

<dd style="margin: 0px 0px 8px; padding: 0px; font-weight: 400; box-sizing: border-box; list-style: none; word-wrap: break-word;">輕量級文本標(biāo)記語言,可以轉(zhuǎn)換成html,pdf等格式</dd>

<dt style="margin: 8px; padding: 0px; font-weight: bold; box-sizing: border-box; list-style: none; word-wrap: break-word;">代碼塊 2</dt>

<dd style="margin: 0px 0px 8px; padding: 0px; font-weight: 400; box-sizing: border-box; list-style: none; word-wrap: break-word;">

這是代碼塊的定義

<pre class="prettyprint linenums prettyprinted" name="code" style="margin: 0px 0px 10px; padding: 18px; font-weight: 400; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; border: 1px solid rgb(225, 225, 232); background-color: rgb(247, 247, 249); font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); white-space: pre-wrap; word-break: break-all; word-wrap: break-word;">

  1. 代碼塊(左側(cè)有八個不可見的空格)

</pre>

</dd>

</dl>

5.3. 列表縮進(jìn)

語法說明:

列表項目標(biāo)記通常是放在最左邊,但是其實也可以縮進(jìn),最多 3 個空格,項目標(biāo)記后面則一定要接著至少一個空格或制表符。

要讓列表看起來更漂亮,你可以把內(nèi)容用固定的縮進(jìn)整理好(顯示效果與代碼一致):

  • 輕輕的我走了, 正如我輕輕的來; 我輕輕的招手, 作別西天的云彩。
    那河畔的金柳, 是夕陽中的新娘; 波光里的艷影, 在我的心頭蕩漾。
    軟泥上的青荇, 油油的在水底招搖; 在康河的柔波里, 我甘心做一條水草!
  • 那榆蔭下的一潭, 不是清泉, 是天上虹; 揉碎在浮藻間, 沉淀著彩虹似的夢。
    尋夢?撐一支長篙, 向青草更青處漫溯; 滿載一船星輝, 在星輝斑斕里放歌。
    但我不能放歌, 悄悄是別離的笙簫; 夏蟲也為我沉默, 沉默是今晚的康橋!
    悄悄的我走了, 正如我悄悄的來; 我揮一揮衣袖, 不帶走一片云彩。

但是如果你懶,那也行:
代碼:

<pre class="prettyprint linenums prettyprinted" name="code" style="margin: 0px 0px 10px; padding: 18px; font-weight: 400; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; border: 1px solid rgb(225, 225, 232); background-color: rgb(247, 247, 249); font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 18px; line-height: 30px; color: rgb(51, 51, 51); white-space: pre-wrap; word-break: break-all; word-wrap: break-word;">

  1. * 輕輕的我走了, 正如我輕輕的來; 我輕輕的招手, 作別西天的云彩。
  2. 那河畔的金柳, 是夕陽中的新娘; 波光里的艷影, 在我的心頭蕩漾。
  3. 軟泥上的青荇, 油油的在水底招搖; 在康河的柔波里, 我甘心做一條水草!
  4. * 那榆蔭下的一潭, 不是清泉, 是天上虹; 揉碎在浮藻間, 沉淀著彩虹似的夢。
  5. 尋夢?撐一支長篙, 向青草更青處漫溯; 滿載一船星輝, 在星輝斑斕里放歌。
  6. 但我不能放歌, 悄悄是別離的笙簫; 夏蟲也為我沉默, 沉默是今晚的康橋!
  7. 悄悄的我走了, 正如我悄悄的來; 我揮一揮衣袖, 不帶走一片云彩。

</pre>

顯示效果:

  • 輕輕的我走了, 正如我輕輕的來; 我輕輕的招手, 作別西天的云彩。
    那河畔的金柳, 是夕陽中的新娘; 波光里的艷影, 在我的心頭蕩漾。
    軟泥上的青荇, 油油的在水底招搖; 在康河的柔波里, 我甘心做一條水草!
  • 那榆蔭下的一潭, 不是清泉, 是天上虹; 揉碎在浮藻間, 沉淀著彩虹似的夢。
    尋夢?撐一支長篙, 向青草更青處漫溯; 滿載一船星輝, 在星輝斑斕里放歌。
    但我不能放歌, 悄悄是別離的笙簫; 夏蟲也為我沉默, 沉默是今晚的康橋!
    悄悄的我走了, 正如我悄悄的來; 我揮一揮衣袖, 不帶走一片云彩。

5.4. 包含段落的列表

語法說明:

列表項目可以包含多個段落,每個項目下的段落都必須縮進(jìn) 4 個空格或是 1 個制表符(顯示效果與代碼一致):

  • 輕輕的我走了, 正如我輕輕的來; 我輕輕的招手, 作別西天的云彩。
    那河畔的金柳, 是夕陽中的新娘; 波光里的艷影, 在我的心頭蕩漾。
    軟泥上的青荇, 油油的在水底招搖; 在康河的柔波里, 我甘心做一條水草!

    那榆蔭下的一潭, 不是清泉, 是天上虹; 揉碎在浮藻間, 沉淀著彩虹似的夢。
    尋夢?撐一支長篙, 向青草更青處漫溯; 滿載一船星輝, 在星輝斑斕里放歌。
    但我不能放歌, 悄悄是別離的笙簫; 夏蟲也為我沉默, 沉默是今晚的康橋!

  • 悄悄的我走了, 正如我悄悄的來; 我揮一揮衣袖, 不帶走一片云彩。

如果你每行都有縮進(jìn),看起來會看好很多,當(dāng)然,再次地,如果你很懶惰,Markdown 也允許:

代碼:

<pre class="prettyprint linenums prettyprinted" name="code" style="margin: 0px 0px 10px; padding: 18px; font-weight: 400; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; border: 1px solid rgb(225, 225, 232); background-color: rgb(247, 247, 249); font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 18px; line-height: 30px; color: rgb(51, 51, 51); white-space: pre-wrap; word-break: break-all; word-wrap: break-word;">

  1. * 輕輕的我走了, 正如我輕輕的來; 我輕輕的招手, 作別西天的云彩。

  2. 那河畔的金柳, 是夕陽中的新娘; 波光里的艷影, 在我的心頭蕩漾。

  3. 軟泥上的青荇, 油油的在水底招搖; 在康河的柔波里, 我甘心做一條水草!

  4. 那榆蔭下的一潭, 不是清泉, 是天上虹; 揉碎在浮藻間, 沉淀著彩虹似的夢。

  5. 尋夢?撐一支長篙, 向青草更青處漫溯; 滿載一船星輝, 在星輝斑斕里放歌。

  6. 但我不能放歌, 悄悄是別離的笙簫; 夏蟲也為我沉默, 沉默是今晚的康橋!

  7. * 悄悄的我走了, 正如我悄悄的來; 我揮一揮衣袖, 不帶走一片云彩。

</pre>

顯示效果:

  • 輕輕的我走了, 正如我輕輕的來; 我輕輕的招手, 作別西天的云彩。
    那河畔的金柳, 是夕陽中的新娘; 波光里的艷影, 在我的心頭蕩漾。
    軟泥上的青荇, 油油的在水底招搖; 在康河的柔波里, 我甘心做一條水草!

    那榆蔭下的一潭, 不是清泉, 是天上虹; 揉碎在浮藻間, 沉淀著彩虹似的夢。
    尋夢?撐一支長篙, 向青草更青處漫溯; 滿載一船星輝, 在星輝斑斕里放歌。
    但我不能放歌, 悄悄是別離的笙簫; 夏蟲也為我沉默, 沉默是今晚的康橋!

  • 悄悄的我走了, 正如我悄悄的來; 我揮一揮衣袖, 不帶走一片云彩。

5.5. 包含引用的列表

語法說明:

如果要在列表項目內(nèi)放進(jìn)引用,那 > 就需要縮進(jìn):

代碼:

<pre class="prettyprint linenums prettyprinted" name="code" style="margin: 0px 0px 10px; padding: 18px; font-weight: 400; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; border: 1px solid rgb(225, 225, 232); background-color: rgb(247, 247, 249); font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 18px; line-height: 30px; color: rgb(51, 51, 51); white-space: pre-wrap; word-break: break-all; word-wrap: break-word;">

  1. * 閱讀的方法:

  2. > 打開書本。

  3. > 打開電燈。

</pre>

顯示效果:

  • 閱讀的方法:

    打開書本。
    打開電燈。

5.6. 包含代碼區(qū)塊的引用

語法說明:
如果要放代碼區(qū)塊的話,該區(qū)塊就需要縮進(jìn)兩次,也就是 8 個空格或是 2 個制表符:

  • 一列表項包含一個列表區(qū)塊:

    <pre class="prettyprint linenums prettyprinted" name="code" style="margin: 0px 0px 10px; padding: 18px; font-weight: 400; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; border: 1px solid rgb(225, 225, 232); background-color: rgb(247, 247, 249); font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); white-space: pre-wrap; word-break: break-all; word-wrap: break-word;">

    1. <代碼寫在這>

    </pre>

5.7. 一個特殊情況

在特殊情況下,項目列表很可能會不小心產(chǎn)生,像是下面這樣的寫法:

<pre class="prettyprint linenums prettyprinted" name="code" style="margin: 0px 0px 10px; padding: 18px; font-weight: 400; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; border: 1px solid rgb(225, 225, 232); background-color: rgb(247, 247, 249); font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 18px; line-height: 30px; color: rgb(51, 51, 51); white-space: pre-wrap; word-break: break-all; word-wrap: break-word;">

  1. 1986. What a great season.

</pre>

會顯示成:

  1. What a great season.

換句話說,也就是在行首出現(xiàn)數(shù)字-句點(diǎn)-空白,要避免這樣的狀況,你可以在句點(diǎn)前面加上反斜杠:

<pre class="prettyprint linenums prettyprinted" name="code" style="margin: 0px 0px 10px; padding: 18px; font-weight: 400; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; border: 1px solid rgb(225, 225, 232); background-color: rgb(247, 247, 249); font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 18px; line-height: 30px; color: rgb(51, 51, 51); white-space: pre-wrap; word-break: break-all; word-wrap: break-word;">

  1. 1986\. What a great season.

</pre>

會顯示成:

1986. What a great season.


6. 引用

語法說明:

引用需要在被引用的文本前加上>符號。

代碼:

<pre class="prettyprint linenums prettyprinted" name="code" style="margin: 0px 0px 10px; padding: 18px; font-weight: 400; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; border: 1px solid rgb(225, 225, 232); background-color: rgb(247, 247, 249); font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 18px; line-height: 30px; color: rgb(51, 51, 51); white-space: pre-wrap; word-break: break-all; word-wrap: break-word;">

  1. > 這是一個有兩段文字的引用,
  2. > 無意義的占行文字1.
  3. > 無意義的占行文字2.
  4. >
  5. > 無意義的占行文字3.
  6. > 無意義的占行文字4.

</pre>

顯示效果:

這是一個有兩段文字的引用,
無意義的占行文字1.
無意義的占行文字2.

無意義的占行文字3.
無意義的占行文字4.

Markdown 也允許你偷懶只在整個段落的第一行最前面加上 > :

代碼:

<pre class="prettyprint linenums prettyprinted" name="code" style="margin: 0px 0px 10px; padding: 18px; font-weight: 400; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; border: 1px solid rgb(225, 225, 232); background-color: rgb(247, 247, 249); font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 18px; line-height: 30px; color: rgb(51, 51, 51); white-space: pre-wrap; word-break: break-all; word-wrap: break-word;">

  1. > 這是一個有兩段文字的引用,

  2. 無意義的占行文字1.

  3. 無意義的占行文字2.

  4. > 無意義的占行文字3.

  5. 無意義的占行文字4.

</pre>

顯示效果:

這是一個有兩段文字的引用,
無意義的占行文字1.
無意義的占行文字2.

無意義的占行文字3.
無意義的占行文字4.

6.1. 引用的多層嵌套

區(qū)塊引用可以嵌套(例如:引用內(nèi)的引用),只要根據(jù)層次加上不同數(shù)量的 > :

代碼:

<pre class="prettyprint linenums prettyprinted" name="code" style="margin: 0px 0px 10px; padding: 18px; font-weight: 400; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; border: 1px solid rgb(225, 225, 232); background-color: rgb(247, 247, 249); font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 18px; line-height: 30px; color: rgb(51, 51, 51); white-space: pre-wrap; word-break: break-all; word-wrap: break-word;">

  1. >>> 請問 Markdwon 怎么用? - 小白

  2. >> 自己看教程! - 憤青

  3. > 教程在哪? - 小白

</pre>

顯示效果:

請問 Markdwon 怎么用? - 小白

自己看教程! - 憤青

教程在哪? - 小白

6.2. 引用其它要素

引用的區(qū)塊內(nèi)也可以使用其他的 Markdown 語法,包括標(biāo)題、列表、代碼區(qū)塊等:

代碼:

<pre class="prettyprint linenums prettyprinted" name="code" style="margin: 0px 0px 10px; padding: 18px; font-weight: 400; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; border: 1px solid rgb(225, 225, 232); background-color: rgb(247, 247, 249); font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 18px; line-height: 30px; color: rgb(51, 51, 51); white-space: pre-wrap; word-break: break-all; word-wrap: break-word;">

  1. > 1. 這是第一行列表項。
  2. > 2. 這是第二行列表項。
  3. >
  4. > 給出一些例子代碼:
  5. >
  6. > return shell_exec("echo $input | $markdown_script");

</pre>

顯示效果:

  1. 這是第一行列表項。
  2. 這是第二行列表項。

給出一些例子代碼:

<pre class="prettyprint linenums prettyprinted" name="code" style="margin: 0px 0px 10px; padding: 18px; font-weight: 400; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; border: 1px solid rgb(225, 225, 232); background-color: rgb(247, 247, 249); font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); white-space: pre-wrap; word-break: break-all; word-wrap: break-word;">

  1. return shell_exec("echo $input | $markdown_script");

</pre>


7. 插入圖像

圖片的創(chuàng)建方式與超鏈接相似,而且和超鏈接一樣也有兩種寫法,行內(nèi)式和參考式寫法。

語法中圖片Alt的意思是如果圖片因為某些原因不能顯示,就用定義的圖片Alt文字來代替圖片。 圖片Title則和鏈接中的Title一樣,表示鼠標(biāo)懸停與圖片上時出現(xiàn)的文字。 Alt 和 Title 都不是必須的,可以省略,但建議寫上。

7.1. 行內(nèi)式

語法說明:[圖片上傳失敗...(image-69d137-1518077788640)]

代碼:

<pre class="prettyprint linenums prettyprinted" name="code" style="margin: 0px 0px 10px; padding: 18px; font-weight: 400; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; border: 1px solid rgb(225, 225, 232); background-color: rgb(247, 247, 249); font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 18px; line-height: 30px; color: rgb(51, 51, 51); white-space: pre-wrap; word-break: break-all; word-wrap: break-word;">

  1. 美麗花兒:
  2. ![美麗花兒](http://upload-images.jianshu.io/upload_images/4416412-cc44a55a6b975181.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240 "美麗花兒")

</pre>

顯示效果:

美麗花兒:


美麗花兒

7.2. 參考式

語法說明:

在文檔要插入圖片的地方寫![圖片Alt][標(biāo)記]

在文檔的最后寫上[標(biāo)記]:圖片地址 “Title”

代碼:

<pre class="prettyprint linenums prettyprinted" name="code" style="margin: 0px 0px 10px; padding: 18px; font-weight: 400; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; border: 1px solid rgb(225, 225, 232); background-color: rgb(247, 247, 249); font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 18px; line-height: 30px; color: rgb(51, 51, 51); white-space: pre-wrap; word-break: break-all; word-wrap: break-word;">

  1. 美麗花兒:

  2. ![美麗花兒][flower]

  3. [flower]:http://ww2.sinaimg.cn/large/56d258bdjw1eugeubg8ujj21kw16odn6.jpg "美麗花兒"

</pre>

顯示效果:

美麗花兒:


美麗花兒

8. 內(nèi)容目錄

在段落中填寫 [TOC] 以顯示全文內(nèi)容的目錄結(jié)構(gòu)。

效果參見最上方的目錄


9. 注腳

語法說明:

在需要添加注腳的文字后加上腳注名字[^注腳名字],稱為加注。 然后在文本的任意位置(一般在最后)添加腳注,腳注前必須有對應(yīng)的腳注名字。

注意:經(jīng)測試注腳與注腳之間必須空一行,不然會失效。成功后會發(fā)現(xiàn),即使你沒有把注腳寫在文末,經(jīng)Markdown轉(zhuǎn)換后,也會自動歸類到文章的最后。

代碼:

<pre class="prettyprint linenums prettyprinted" name="code" style="margin: 0px 0px 10px; padding: 18px; font-weight: 400; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; border: 1px solid rgb(225, 225, 232); background-color: rgb(247, 247, 249); font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 18px; line-height: 30px; color: rgb(51, 51, 51); white-space: pre-wrap; word-break: break-all; word-wrap: break-word;">

  1. 使用 Markdown[^1]可以效率的書寫文檔, 直接轉(zhuǎn)換成 HTML[^2], 你可以使用 Leanote[^Le] 編輯器進(jìn)行書寫。

  2. [^1]:Markdown是一種純文本標(biāo)記語言

  3. [^2]:HyperText Markup Language 超文本標(biāo)記語言

  4. [^Le]:開源筆記平臺,支持Markdown和筆記直接發(fā)為博文

</pre>

顯示效果:

使用 Markdown1可以效率的書寫文檔, 直接轉(zhuǎn)換成 HTML2, 你可以使用 Leanote3 編輯器進(jìn)行書寫。

注:腳注自動被搬運(yùn)到最后面,請到文章末尾查看,并且腳注后方的鏈接可以直接跳轉(zhuǎn)回到加注的地方。


10. LaTeX 公式

10.1. $ 表示行內(nèi)公式:

代碼:

<pre class="prettyprint linenums prettyprinted" name="code" style="margin: 0px 0px 10px; padding: 18px; font-weight: 400; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; border: 1px solid rgb(225, 225, 232); background-color: rgb(247, 247, 249); font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 18px; line-height: 30px; color: rgb(51, 51, 51); white-space: pre-wrap; word-break: break-all; word-wrap: break-word;">

  1. 質(zhì)能守恒方程可以用一個很簡潔的方程式 $E=mc^2$ 來表達(dá)。

</pre>

顯示效果:

質(zhì)能守恒方程可以用一個很簡潔的方程式 <nobr style="box-sizing: border-box; word-wrap: break-word; border: 0px; padding: 0px; margin: 0px; max-width: none; max-height: none; min-width: 0px; min-height: 0px; vertical-align: 0px;">E=mc2</nobr>E=mc2 來表達(dá)。

10.2 $$ 表示整行公式:

代碼:

<pre class="prettyprint linenums prettyprinted" name="code" style="margin: 0px 0px 10px; padding: 18px; font-weight: 400; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; border: 1px solid rgb(225, 225, 232); background-color: rgb(247, 247, 249); font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 18px; line-height: 30px; color: rgb(51, 51, 51); white-space: pre-wrap; word-break: break-all; word-wrap: break-word;">

  1. $\sum_{i=1}^n a_i=0$

  2. $f(x_1,x_x,\ldots,x_n) = x_1^2 + x_2^2 + \cdots + x_n^2 $

  3. $\sum^{j-1}_{k=0}{\widehat{\gamma}_{kj} z_k}$

</pre>

顯示效果:

<nobr style="box-sizing: border-box; word-wrap: break-word; border: 0px; padding: 0px; margin: 0px; max-width: none; max-height: none; min-width: 0px; min-height: 0px; vertical-align: 0px;">∑i=1nai=0</nobr>∑i=1nai=0

<nobr style="box-sizing: border-box; word-wrap: break-word; border: 0px; padding: 0px; margin: 0px; max-width: none; max-height: none; min-width: 0px; min-height: 0px; vertical-align: 0px;">f(x1,xx,…,xn)=x21+x22+?+x2n</nobr>f(x1,xx,…,xn)=x12+x22+?+xn2

<nobr style="box-sizing: border-box; word-wrap: break-word; border: 0px; padding: 0px; margin: 0px; max-width: none; max-height: none; min-width: 0px; min-height: 0px; vertical-align: 0px;">∑k=0j?1γ?kjzk</nobr>∑k=0j?1γ^kjzk

訪問 MathJax 參考更多使用方法。


11. 流程圖

代碼:

<pre class="prettyprint linenums prettyprinted" name="code" style="margin: 0px 0px 10px; padding: 18px; font-weight: 400; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; border: 1px solid rgb(225, 225, 232); background-color: rgb(247, 247, 249); font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 18px; line-height: 30px; color: rgb(51, 51, 51); white-space: pre-wrap; word-break: break-all; word-wrap: break-word;">

  1. flow

  2. st=>start: Start:>https://www.zybuluo.com

  3. io=>inputoutput: verification

  4. op=>operation: Your Operation

  5. cond=>condition: Yes or No?

  6. sub=>subroutine: Your Subroutine

  7. e=>end

  8. st->io->op->cond

  9. cond(yes)->e

  10. cond(no)->sub->io

</pre>

顯示效果:

StartverificationYour OperationYes or No?EndYour Subroutineyesno


更多語法參考:流程圖語法參考


12 .表格

語法說明:

  1. 不管是哪種方式,第一行為表頭,第二行分隔表頭和主體部分,第三行開始每一行為一個表格行。
  2. 列于列之間用管道符|隔開。原生方式的表格每一行的兩邊也要有管道符。
  3. 第二行還可以為不同的列指定對齊方向。默認(rèn)為左對齊,在-右邊加上:就右對齊。

代碼:

簡單方式寫表格:

<pre class="prettyprint linenums prettyprinted" name="code" style="margin: 0px 0px 10px; padding: 18px; font-weight: 400; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; border: 1px solid rgb(225, 225, 232); background-color: rgb(247, 247, 249); font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 18px; line-height: 30px; color: rgb(51, 51, 51); white-space: pre-wrap; word-break: break-all; word-wrap: break-word;">

  1. 學(xué)號|姓名|分?jǐn)?shù)
  2. -|-|-
  3. 小明|男|75
  4. 小紅|女|79
  5. 小陸|男|92

</pre>

原生方式寫表格:

<pre class="prettyprint linenums prettyprinted" name="code" style="margin: 0px 0px 10px; padding: 18px; font-weight: 400; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; border: 1px solid rgb(225, 225, 232); background-color: rgb(247, 247, 249); font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 18px; line-height: 30px; color: rgb(51, 51, 51); white-space: pre-wrap; word-break: break-all; word-wrap: break-word;">

  1. |學(xué)號|姓名|分?jǐn)?shù)|
  2. |-|-|-|
  3. |小明|男|75|
  4. |小紅|女|79|
  5. |小陸|男|92|

</pre>

為表格第二列指定方向:

<pre class="prettyprint linenums prettyprinted" name="code" style="margin: 0px 0px 10px; padding: 18px; font-weight: 400; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; border: 1px solid rgb(225, 225, 232); background-color: rgb(247, 247, 249); font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 18px; line-height: 30px; color: rgb(51, 51, 51); white-space: pre-wrap; word-break: break-all; word-wrap: break-word;">

  1. 產(chǎn)品|價格
  2. -|-:
  3. Leanote 高級賬號|60元/年
  4. Leanote 超級賬號|120元/年

</pre>

顯示效果:
簡單方式寫表格:

學(xué)號 姓名 分?jǐn)?shù)
小明 75
小紅 79
小陸 92

原生方式寫表格:

學(xué)號 姓名 分?jǐn)?shù)
小明 75
小紅 79
小陸 92

為表格第二列指定方向:

產(chǎn)品 價格
Leanote 高級賬號 60元/年
Leanote 超級賬號 120元/年

13. 分隔線

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

代碼:

<pre class="prettyprint linenums prettyprinted" name="code" style="margin: 0px 0px 10px; padding: 18px; font-weight: 400; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; border: 1px solid rgb(225, 225, 232); background-color: rgb(247, 247, 249); font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 18px; line-height: 30px; color: rgb(51, 51, 51); white-space: pre-wrap; word-break: break-all; word-wrap: break-word;">

  1. * * *

  2. ***

  3. *****

  4. - - -

  5. ---------------------------------------

</pre>

顯示效果都一樣:



14. 代碼

對于程序員來說這個功能是必不可少的,插入程序代碼的方式有兩種,一種是利用縮進(jìn)(Tab), 另一種是利用”`”符號(一般在ESC鍵下方)包裹代碼。

語法說明:

  1. 插入行內(nèi)代碼,即插入一個單詞或者一句代碼的情況,使用code這樣的形式插入。
  2. 插入多行代碼,可以使用縮進(jìn)或者“code “,具體看示例。

注意: 縮進(jìn)式插入前方必須有空行

8.1. 行內(nèi)式

代碼:

<pre class="prettyprint linenums prettyprinted" name="code" style="margin: 0px 0px 10px; padding: 18px; font-weight: 400; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; border: 1px solid rgb(225, 225, 232); background-color: rgb(247, 247, 249); font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 18px; line-height: 30px; color: rgb(51, 51, 51); white-space: pre-wrap; word-break: break-all; word-wrap: break-word;">

  1. C語言里的函數(shù)scanf()怎么使用?

</pre>

顯示效果:

C語言里的函數(shù) scanf() 怎么使用?

8.2. 縮進(jìn)式多行代碼

縮進(jìn) 4 個空格或是 1 個制表符

一個代碼區(qū)塊會一直持續(xù)到?jīng)]有縮進(jìn)的那一行(或是文件結(jié)尾)。

代碼:

<pre class="prettyprint linenums prettyprinted" name="code" style="margin: 0px 0px 10px; padding: 18px; font-weight: 400; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; border: 1px solid rgb(225, 225, 232); background-color: rgb(247, 247, 249); font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 18px; line-height: 30px; color: rgb(51, 51, 51); white-space: pre-wrap; word-break: break-all; word-wrap: break-word;">

  1. #include <stdio.h>
  2. int main(void)
  3. {
  4. printf("Hello world\n");
  5. }

</pre>

顯示效果:

<pre class="prettyprint linenums prettyprinted" name="code" style="margin: 0px 0px 10px; padding: 18px; font-weight: 400; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; border: 1px solid rgb(225, 225, 232); background-color: rgb(247, 247, 249); font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 18px; line-height: 30px; color: rgb(51, 51, 51); white-space: pre-wrap; word-break: break-all; word-wrap: break-word;">

  1. #include <stdio.h>
  2. int main(void)
  3. {
  4. printf("Hello world\n");
  5. }

</pre>

8.3. 用六個`包裹多行代碼

代碼:

<pre class="prettyprint linenums prettyprinted" name="code" style="margin: 0px 0px 10px; padding: 18px; font-weight: 400; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; border: 1px solid rgb(225, 225, 232); background-color: rgb(247, 247, 249); font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 18px; line-height: 30px; color: rgb(51, 51, 51); white-space: pre-wrap; word-break: break-all; word-wrap: break-word;">

  1. #include <stdio.h>
  2. int main(void)
  3. {
  4. printf("Hello world\n");
  5. }
  6. 、、、

</pre>

顯示效果:

<pre class="prettyprint linenums prettyprinted" name="code" style="margin: 0px 0px 10px; padding: 18px; font-weight: 400; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; border: 1px solid rgb(225, 225, 232); background-color: rgb(247, 247, 249); font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 18px; line-height: 30px; color: rgb(51, 51, 51); white-space: pre-wrap; word-break: break-all; word-wrap: break-word;">

  1. #include <stdio.h>
  2. int main(void)
  3. {
  4. printf("Hello world\n");
  5. }

</pre>

8.4. HTML 原始碼

在代碼區(qū)塊里面, & 、 < 和 > 會自動轉(zhuǎn)成 HTML 實體,這樣的方式讓你非常容易使用 Markdown 插入范例用的 HTML 原始碼,只需要復(fù)制貼上,剩下的 Markdown 都會幫你處理,例如:

代碼:

第一個例子:

<pre class="prettyprint linenums prettyprinted" name="code" style="margin: 0px 0px 10px; padding: 18px; font-weight: 400; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; border: 1px solid rgb(225, 225, 232); background-color: rgb(247, 247, 249); font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 18px; line-height: 30px; color: rgb(51, 51, 51); white-space: pre-wrap; word-break: break-all; word-wrap: break-word;">

  1. <div class="footer">
  2. ? 2004 Foo Corporation
  3. </div>

</pre>

第二個例子:

<pre class="prettyprint linenums prettyprinted" name="code" style="margin: 0px 0px 10px; padding: 18px; font-weight: 400; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; border: 1px solid rgb(225, 225, 232); background-color: rgb(247, 247, 249); font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 18px; line-height: 30px; color: rgb(51, 51, 51); white-space: pre-wrap; word-break: break-all; word-wrap: break-word;">

  1. <table>
  2. <tr>
  3. <th rowspan="2">值班人員</th>
  4. <th>星期一</th>
  5. <th>星期二</th>
  6. <th>星期三</th>
  7. </tr>
  8. <tr>
  9. <td>李強(qiáng)</td>
  10. <td>張明</td>
  11. <td>王平</td>
  12. </tr>
  13. </table>

</pre>

顯示效果:

第一個例子:

? 2004 Foo Corporation

第二個例子:

| 值班人員 | 星期一 | 星期二 | 星期三 |
| 李強(qiáng) | 張明 | 王平 |


  1. Markdown是一種純文本標(biāo)記語言 ?
  2. HyperText Markup Language 超文本標(biāo)記語言 ?
  3. 開源筆記平臺,支持Markdown和筆記直接發(fā)為博文 ?
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

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

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