Markdown 語法手冊

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

原創 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. 分級標題

第一種寫法:

<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>

第二種寫法:

<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. ###### 六級標題

</pre>

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


3. 超鏈接

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

3.1. 行內式

語法說明:

  • []里寫鏈接文字,()里寫鏈接地址, ()中的”“中可以為鏈接指定title屬性,title屬性可加可不加。title屬性的效果是鼠標懸停在鏈接上會出現指定的 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. 歡迎來到[梵居鬧市](http://blog.leanote.com/freewalk)

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

</pre>

顯示效果:

歡迎來到梵居鬧市

歡迎來到梵居鬧市

3.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. 我經常去的幾個網站[Google][1]、[Leanote][2]以及[自己的博客][3]

  2. [Leanote 筆記][2]是一個不錯的[網站][]。

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

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

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

  6. [網站]:http://http://blog.leanote.com/freewalk

</pre>

顯示效果:

我經常去的幾個網站Google、Leanote以及自己的博客
Leanote 筆記是一個不錯的網站

3.3. 自動鏈接

語法說明:
Markdown 支持以比較簡短的自動鏈接形式來處理網址和電子郵件信箱,只要是用<>包起來, 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. <http://example.com/>
  2. <address@example.com>

</pre>

顯示效果:

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


4. 錨點

網頁中,錨點其實就是頁內超鏈接,也就是鏈接本文檔內部的某些元素,實現當前頁面中的跳轉。比如我這里寫下一個錨點,點擊回到目錄,就能跳轉到目錄。 在目錄中點擊這一節,就能跳過來。還有下一節的注腳。這些根本上都是用錨點來實現的。

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

語法描述:
在你準備跳轉到的指定標題后插入錨點{#標記},然后在文檔的其它地方寫上連接到錨點的鏈接。

代碼:

<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. 跳轉到[目錄](#index)

</pre>

顯示效果:

跳轉到目錄


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. 有序列表

有序列表則使用數字接著一個英文句點。

代碼:

<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. 定義型列表

語法說明:

定義型列表由名詞和解釋組成。一行寫上定義,緊跟一行寫上解釋。解釋的寫法:緊跟一個縮進(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. : 輕量級文本標記語言,可以轉換成html,pdf等格式(左側有一個可見的冒號和四個不可見的空格)

  3. 代碼塊 2

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

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

</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;">輕量級文本標記語言,可以轉換成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. 代碼塊(左側有八個不可見的空格)

</pre>

</dd>

</dl>

5.3. 列表縮進

語法說明:

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

</pre>

顯示效果:

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

5.4. 包含段落的列表

語法說明:

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

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

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

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

如果你每行都有縮進,看起來會看好很多,當然,再次地,如果你很懶惰,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. 包含引用的列表

語法說明:

如果要在列表項目內放進引用,那 > 就需要縮進:

代碼:

<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. 包含代碼區塊的引用

語法說明:
如果要放代碼區塊的話,該區塊就需要縮進兩次,也就是 8 個空格或是 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. <代碼寫在這>

    </pre>

5.7. 一個特殊情況

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

<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.

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

<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. 引用的多層嵌套

區塊引用可以嵌套(例如:引用內的引用),只要根據層次加上不同數量的 > :

代碼:

<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. 引用其它要素

引用的區塊內也可以使用其他的 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. > 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. 插入圖像

圖片的創建方式與超鏈接相似,而且和超鏈接一樣也有兩種寫法,行內式和參考式寫法。

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

7.1. 行內式

語法說明:[圖片上傳失敗...(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][標記]

在文檔的最后寫上[標記]:圖片地址 “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. 內容目錄

在段落中填寫 [TOC] 以顯示全文內容的目錄結構。

效果參見最上方的目錄


9. 注腳

語法說明:

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

注意:經測試注腳與注腳之間必須空一行,不然會失效。成功后會發現,即使你沒有把注腳寫在文末,經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. 使用 Markdown[^1]可以效率的書寫文檔, 直接轉換成 HTML[^2], 你可以使用 Leanote[^Le] 編輯器進行書寫。

  2. [^1]:Markdown是一種純文本標記語言

  3. [^2]:HyperText Markup Language 超文本標記語言

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

</pre>

顯示效果:

使用 Markdown1可以效率的書寫文檔, 直接轉換成 HTML2, 你可以使用 Leanote3 編輯器進行書寫。

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


10. LaTeX 公式

10.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. 質能守恒方程可以用一個很簡潔的方程式 $E=mc^2$ 來表達。

</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;">E=mc2</nobr>E=mc2 來表達。

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. 第二行還可以為不同的列指定對齊方向。默認為左對齊,在-右邊加上:就右對齊。

代碼:

簡單方式寫表格:

<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. 小明|男|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. |學號|姓名|分數|
  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. 產品|價格
  2. -|-:
  3. Leanote 高級賬號|60元/年
  4. Leanote 超級賬號|120元/年

</pre>

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

學號 姓名 分數
小明 75
小紅 79
小陸 92

原生方式寫表格:

學號 姓名 分數
小明 75
小紅 79
小陸 92

為表格第二列指定方向:

產品 價格
Leanote 高級賬號 60元/年
Leanote 超級賬號 120元/年

13. 分隔線

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

代碼:

<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. 代碼

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

語法說明:

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

注意: 縮進式插入前方必須有空行

8.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. C語言里的函數scanf()怎么使用?

</pre>

顯示效果:

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

8.2. 縮進式多行代碼

縮進 4 個空格或是 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. #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 原始碼

在代碼區塊里面, & 、 < 和 > 會自動轉成 HTML 實體,這樣的方式讓你非常容易使用 Markdown 插入范例用的 HTML 原始碼,只需要復制貼上,剩下的 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>李強</td>
  10. <td>張明</td>
  11. <td>王平</td>
  12. </tr>
  13. </table>

</pre>

顯示效果:

第一個例子:

? 2004 Foo Corporation

第二個例子:

| 值班人員 | 星期一 | 星期二 | 星期三 |
| 李強 | 張明 | 王平 |


  1. Markdown是一種純文本標記語言 ?
  2. HyperText Markup Language 超文本標記語言 ?
  3. 開源筆記平臺,支持Markdown和筆記直接發為博文 ?
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容