1. 程式人生 > >Markdown簡明教程

Markdown簡明教程

Markdown是什麼

Markdown是一種輕量級標記語言,它允許人們“使用易讀易寫的純文字格式編寫文件,然後轉換成有效的XHTML(或者HTML)文件”。

作者:約翰.格魯伯 (John Gruber),這裡是他部落格上有關Markdown語法的文章

author1

作者:亞倫.斯沃茲 (Aaron Swartz) (已故)

author1

為什麼使用Markdown

  • 很多人在用,各大主要實現的開源工程非常活躍。

  • 簡潔,提高文件撰寫效率。

  • 只與文件內容有關,與文件樣式無關,便於調整樣式。

  • 基於純文字格式,便於搜尋。

  • 有豐富的直譯器或工具支援。

標準語法

強調

斜體

    *斜體*
    _斜體_

粗體

    **粗體**
    __粗體__

換行

在行末輸入兩個空格然後回車即可實現文字的強制換行。

標題

標題演示

    主標題
    -
    主標題
    ----------
    主標題
    =
    主標題
    ==========
    # H1標題

    ## H2標題

    ### H3標題

    #### H4標題

    ##### H5標題

    ###### H6標題

數字列表

    1. 紅

    2. 黃

    3. 藍
    2. 紅

    1. 黃

    3. 藍

符號列表

    * 紅

    * 黃

    * 藍
    + 紅

    + 黃

    + 藍
    - 紅

    - 黃

    - 藍

層級式列表

  • 顏色

      • 紫紅

      • 橘紅

      • 暗藍

      • 亮藍

      • 孔雀藍

    * 顏色

      1. 紅

        + 紫紅

        + 橘紅

      2. 黃

      3. 藍

        - 暗藍

        - 亮藍

        - 孔雀藍

引用

這是一段引用文字

    > 這是一段引用文字

這是一段引用文字

巢狀引用文字

巢狀引用文字

    > 這是一段引用文字
    >> 巢狀引用文字
    >>> 巢狀引用文字

水平分割線

三個或更多*號為分割線

    ***
    ---

程式碼段

使用一個反單引號可以生成一個行內程式碼塊

`行內程式碼塊`

行起始為4個空格或1個Tab佔位符則後續文字將被識別為程式碼段

//程式碼段演示
function aaa(){
    alert("一段javascript程式碼");
}

圖片

演示無效圖片

![演示無效圖片](http:// "無效圖片")

演示本地路徑圖片

![演示本地路徑圖片](./imgs/admin.png '本地路徑圖片')

演示遠端路徑圖片

![演示遠端路徑圖片](http://www.baidu.com/img/bdlogo.gif "遠端路徑圖片")

演示參考連結圖片

![演示參考連結圖片][002]
[002]: https://img-blog.csdn.net/20140325110441140?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcHh6eQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast "參考連結圖片"

連結

[內聯樣式連結](http://example.com "提示文字")
[參考樣式連結描述文字A][001]

[參考樣式連結描述文字B][001]

[001]: http://about:blank "提示文字"

或

[001]: http://about:blank '提示文字'

或

[001]: http://about:blank (提示文字)

內聯HTML標記

在MD文件裡,你可以插入原生HTML標記,如:

一段紅色文字

<font color='red' style='font-size:20pt'>一段紅色文字</font>
第一列 第二列
第一行 文字1
第一行 文字2
<table>
    <thead>
        <tr>
            <th>第一列</th>
            <th>第二列</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>第一行</td>
            <td>文字1</td>
        </tr>
        <tr>
            <td>第二行</td>
            <td>文字2</td>
        </tr>
    </tbody>
</table>

目錄(toc

  • 功能

    此外掛可以在文件內根據標題自動生成目錄。

  • 用法

    在文件起始處放置[toc]或者[TOC]標記即可讓解析器自動生成目錄。

  • 功能

    在文件裡通過簡單標記插入表格。

  • 用法

    Markdown對錶格的支援比較簡陋,但可以滿足一般的簡單表格的展現需求。

注意:Markdown原生就支援內聯HTML標記,因此,你也可以通過內聯HTML的TABLE標記將表格插入到文件內。

  • 例子
第一列 第二列 第三列 第四列
第一行 文字二 文字三 文字四
第二行 文字二 文字三 文字四
第一列 | 第二列 | 第三列 | 第四列  
----- | ----- | ----- | -----  
第一行 | 文字二 | 文字三 | 文字四  
第二行 | 文字二 | 文字三 | 文字四
第一列 第二列 第三列 第四列 第五列 第六列 第七列 第八列
第一行 文字二 文字三 跨兩列文字 文字六 文字七 文字八
第二行 文字二 文字三 這是一段
長文字
文字五 文字六 文字七 文字八
第一列 | 第二列 | 第三列 | 第四列 | 第五列 | 第六列 | 第七列 | 第八列  
----- | ----- | ----- | ----- | ----- | ----- | ----- | -----  
第一行 | _文字二_ | 文字三 | **跨兩列文字** | 文字六 | 文字七 | 文字八  
第二行 | 文字二 | 文字三 | 這是一段<br/>長文字 | 文字五 | <font color='green'>文字六</font> | 文字七 | 文字八

注意:由上面這個表格可知 tables 的表格不支援合併單元格!

公式(mathjax)

  • 功能

    在文件中通過 MathJax 標記插入公式。

  • 用法

    此外掛基於開源公式顯示引擎 MathJax (語法為類LaTex標記語言,最終輸出W3C的MathML標記語言)

  • 例子

    可以支援像 \(\frac{\pi}{2}\) $\pi$ 這樣的內聯公式。

    markdown 可以支援像 \\(\frac{\pi}{2}\\) $\pi$ 這樣的內聯公式。

    也可以是非內聯的,如:

    $$F(\omega) = \frac{1}{\sqrt{2\pi}} \int_{-\infty}^{\infty} f(t) \, e^{ - i \omega t}dt$$

    \[\int_0^1 f(t) \mathrm{d}t\]

    \[\sum_j \gamma_j^2/d_j\]

    ```markdown

    $$F(\omega) = \frac{1}{\sqrt{2\pi}} \int_{-\infty}^{\infty} f(t) \, e^{ - i \omega t}dt$$
    \\[\int_0^1 f(t) \mathrm{d}t\\]
    
    \\[\sum_j \gamma_j^2/d_j\\]
    

    ```

注意: MathJax 一般都需要訪問網路,因此保證網路暢通才能正常顯示。大多數流行的瀏覽器 都支援MathJaxMathJax的語法 是類LaTex語法,標記繁多而複雜,不便於記憶。

  • 功能

    在大型文件系統裡,一般都有內容跳轉功能,這種跳轉通過連結實現,並且此功能必須基於設定在DOM元素上的id屬性才能完成。這個擴充套件就能夠指定某個標題的id屬性。

  • 用法

    你需要在要設定id屬性的標題文字後加上#{#id-attr-value},其中id-attr-valueid屬性的值:

  • 例子

    [跳轉到“常用擴充套件”章節][self-md-ext]

    [self-md-ext]: #md-ext

GitHub特性標記

注意:大多數MD解析器現在都支援全部或部分GitHub特性標記,但是在使用它們之前請還是要先確定一下是否支援!

程式碼段

與標準標記不同,GitHub風格的MD程式碼段是以兩組三個連續的反單引號標記來標識,並且在第一組三個反單引號之後可以緊跟指定的程式碼語言名稱,如:

javascript程式碼段定義:

```js
function aaa(){
    alert("一個javascript程式碼段");
}
```

Python程式碼段定義:

```python
import random
class CardGame(object):
    """ a sample python class """
    NB_CARDS = 32
    def __init__(self, cards=5):
        self.cards = random.sample(range(self.NB_CARDS), 5)
        print 'ready to play'
```

小圖示

GitHub風格的MD標記可以讓你將一些預置的小圖示加入到文件內。

:+1: :heart: :beer:

:+1: :heart: :beer:

注意:所有這些圖示資源都放在GitHub的伺服器上而不是本地!解析器生成的HTML連結也是指向GitHub的伺服器!

其他特性

更多GitHub特性Markdown語法請看這裡

最佳實踐

  1. 儘量不要在MD文件內使用內聯HTML標記,增強相容性。

  2. 將所有的參考式連結(包括圖片參考連結)定義在MD文件的最後,便於維護。

  3. 儘量使用標準語法,少用或不用不流行的擴充套件語法或特性語法。

  4. 不要在一個MD文件內寫非常多的內容,應該根據實際情況將內容分割到多個檔案內,然後通過定義id屬性值和連結來進行跳轉。

Markdown編輯器

  1. Sublime Text (win/linux/mac)官網

    安裝Markdown Preview外掛後即可很好的支援Markdown檔案的編輯和預覽、轉換。

    Sublime Text 2截圖

    特點:

    • 語法高亮。
    • 豐富的文字編輯功能。
    • 自帶簡明語法手冊(Cheat sheet),能夠給新手快捷指引。
    • 支援GitHub特性語法。
    • 支援HTML的匯出和複製到剪貼簿功能。
    • 支援常用的一些擴充套件(需要修改預設配置)。
    • 支援HTML模板。
    • 支援自定義樣式。

    缺點:

    • 不能匯出除CSS以外的純HTML標記程式碼段(需要手工複製)。
    • Sublime Text 2/3在linux下的中文輸入存在問題(一個bug)。
    • 不支援實時預覽,但可以先選擇在瀏覽器中預覽然後在文件修改後在瀏覽器中按F5重新整理頁面顯示的方法來實現類似實時預覽的功能。
  2. reText(win/linux)官網

    它是一個開源專業Markdown文件編輯器(同時也支援reStructuredText標記語言),一般在linux下使用。

    reText截圖

    特點:

    • 語法高亮
    • 支援GitHub特性語法。
    • 生成的HTML文件中的樣式為外部樣式(即:使用)
    • 支援匯出HTML、PDF和ODT格式檔案。
    • 支援HTML模板。
    • 支援自定義樣式。
    • 支援實時預覽。

    缺點:

    • 在windows環境下難以安裝(需要手動安裝一大堆東西)。
    • 不能匯出除CSS以外的純HTML標記程式碼段(需要手工複製)。
  3. MarkdownPad(win)官網

    是一款專業MD編輯器。

    markdownpad截圖

    特點:

    • 語法高亮。
    • 支援GitHub特性語法。
    • 支援匯出HTML和PDF檔案。
    • 支援自定義樣式。
    • 支援實時預覽。
    • 離線支援GitHub風格MD標記

    缺點:

    • 商業軟體,沒有購買之前有功能限制。
    • 沒有HTML模板定製功能。
  4. haroopad(win/linux/mac)官網

    韓國人開發的一款新一代MD編輯器,很有潛力的MD編輯器。

    haroopad截圖

    特點:

    • 基於Chromium開發。
    • 語法高亮。
    • 支援GitHub特性語法。
    • 生成的HTML文件中的樣式為外部樣式(即:使用)。
    • 支援匯出除CSS以外的純HTML標記程式碼段。
    • 具有簡潔的MD語法導航邊欄。
    • 支援匯出HTML檔案。
    • 支援將解析出的內容作為郵件傳送。
    • 支援自定義樣式。
    • 支援實時預覽。
    • 支援編輯區與預覽區域的同步滾動。
    • 支援語法檢測,在有問題的標記文字下面將顯示紅色波浪線。
    • 支援VIM編輯模式。
    • 與社交平臺整合。

    缺點:

    • 當前還處在Beta測試階段,功能不夠穩定。
    • 沒有HTML模板定製功能。

附錄

Markdown解析器各大實現

  • 引入更多標記特性和輸出選項的改進版Markdown解析器

  • 基於Ruby的MD解析器

  • [markdown-js][011]

    基於javascript(NodeJS)的MD解析器

  • 命令列文件轉換神器!自帶MD解析器