前端學(xué)Markdown

概述

Markdown的目標(biāo)是實現(xiàn)易讀易寫，一份使用Markdown格式撰寫的文件應(yīng)該可以直接以純文本發(fā)布

Markdown的語法全由一些符號所組成，它的語法種類很少，只對應(yīng)HTML標(biāo)記的一小部分。由于Markdown實際上就是簡化版的HTML，所以直接寫HTML也是可以的

段落

不加任何符號的一段字符，就是一個段落。多個段落之間用空行分隔
[注意]在markdown中，多個空行會合并為一個空行顯示

p1   p2

p3

輸出HTML為

<p>p1</p><p>p2</p><p>p3</p>

換行

如果段落之間沒有空行，則解析為HTML標(biāo)簽<br>

p1p2
p3

輸出HTML為

<p>p1<br>
   p2<br>
   p3</p>

標(biāo)題

#、##、###、####、#####、######分別對應(yīng)<h2>、<h3>、<h4>、<h5>、<h6>、<h7>。其實我個人感覺，不如直接使用<h>標(biāo)簽方便，特別是到標(biāo)題3以后

#h2##h3###h4####h5#####h6######h7

輸出HTML為

<h2>h2</h2><h3>h3</h3><h4>h4</h4><h5>h5</h5><h6>h6</h6><h7>h7</h7>

區(qū)塊

說起區(qū)塊，可能聽說的人比較少。它用'>'這個符號來表示，對應(yīng)于HTML中的<blockquote>標(biāo)簽，用于引用塊元素。《Head first HTML And CSS》一書中，還專門針對<blockquote>和<q>進行了詳細(xì)的區(qū)分，但實際用的比較少
但是，markdown對應(yīng)區(qū)塊引用的實現(xiàn)上，并不能完整表達<blockquote>標(biāo)簽的語義，應(yīng)該可以引用多個段落，但實際上markdown的'>'符號只能引用一個段落

>p1

p2

輸出HTML為

<blockquote>
    <p>p1</p></blockquote><p>p2</p>

列表

【無序列表】

無序列表使用星號、加號和減號來做為列表的項目標(biāo)記

* red* blue* green+ red+ blue+ green- red- blue- green

輸出HTML為

<ul>
    <li>red</li>
    <li>blue</li>
    <li>green</li></ul>

【有序列表】

有序的列表則是使用一般的數(shù)字接著一個英文句點作為項目標(biāo)記

1. Red2. Green3. Blue

輸出HTML為

<ol>
    <li>red</li>
    <li>blue</li>
    <li>green</li></ol>

[注意]如果在項目之間插入空行，那項目的內(nèi)容會用<p>包起來

分隔線

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

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

輸出HTML為

<hr><hr><hr><hr><hr>

鏈接

Markdown支持三種形式的鏈接語法：行內(nèi)、參考和自動。行內(nèi)和參考鏈接都使用角括號把文字轉(zhuǎn)成鏈接

[注意]由于Markdown默認(rèn)產(chǎn)生的鏈接是當(dāng)前頁打開，且無法實現(xiàn)_blank，所以，就個人而言還是直接使用<a>更方便

【行內(nèi)鏈接】

行內(nèi)形式是直接在后面用括號直接接上鏈接

This is an [example link](http://cnblogs.com/)

輸出HTML為

<p>This is an<a >example link</a></p>

【參考鏈接】

參考形式的鏈接可以為鏈接定一個名稱，之后可以在文件的其他地方定義該鏈接的內(nèi)容。title屬性是選擇性的，鏈接名稱可以用字母、數(shù)字和空格，但是不分大小寫

I get 10 times more traffic from [Google][1] than from [Yahoo][2] or [MSN][3].

[1]: http://google.com/ "Google"[2]: http://search.yahoo.com/ "Yahoo Search"[3]: http://search.msn.com/ "MSN Search"

輸出HTML為

<p>I get 10 times more traffic from <a >MSN</a>.</p>

【直接鏈接】

Markdown支持比較簡短的自動鏈接形式來處理網(wǎng)址和電子郵件信箱，只要是用方括號包起來，Markdown就會自動把它轉(zhuǎn)成鏈接，鏈接的文字就和鏈接位置一樣

[注意]在網(wǎng)址前一定要加http://，否則將不會被識別為URL

<http://cnblogs.com/>

輸出HTML為

<a >http://cnblogs.com/</a>

圖片

圖片的語法和鏈接很像。先是一個驚嘆號!，接著一個方括號，里面放上圖片的替代文字，接著一個普通括號，里面放上圖片的網(wǎng)址，最后還可以用引號包住并加上選擇性的'title'文字

【行內(nèi)形式】

![alt text](/path/to/img.jpg "Title")

【參考形式】

![alt text][id]

[id]: /path/to/img.jpg "Title"

上面兩種方法都會輸出HTML為：

<img src="/path/to/img.jpg" alt="alt text" title="Title" />

代碼

【code】

使用反引號`來標(biāo)記代碼區(qū)段<code>，區(qū)段內(nèi)的&、<和>都會被自動的轉(zhuǎn)換成HTML實體

`<p>`段落`</p>`

輸出HTML為

<code><p></code>段落<code></p></code>

【pre】

如果要建立一個已經(jīng)格式化好的代碼區(qū)塊，只要每行都縮進 4 個空格或是一個 tab 就可以了，而 &、< 和 > 也一樣會自動轉(zhuǎn)成 HTML 實體

<blockquote><p>For example.</p></blockquote>

輸出HTML為

<pre><code>&lt;blockquote&gt;&lt;p&gt;For example.&lt;/p&gt;&lt;/blockquote&gt;</code></pre>

強調(diào)

Markdown 使用星號*和底線_作為標(biāo)記強調(diào)字詞的符號，被*或_ 包圍的字詞會被轉(zhuǎn)成用 <em>標(biāo)簽包圍，用兩個* 或_包起來的話，則會被轉(zhuǎn)成<strong>

如果* 和 _ 兩邊都有空白的話，它們就只會被當(dāng)成普通的符號。如果要在文字前后直接插入普通的星號或底線，可以用反斜線：

\*em* **strong*\*

輸出HTML為

<em>em</em><strong>strong</strong>

轉(zhuǎn)義

在markdown中，有一些符號具有特殊的用途，如\、*等，如果要使用它們的本意，則需要在前面加一個反斜杠\來實現(xiàn)

Markdown 支持以下這些符號前面加上反斜杠來幫助插入普通的符號

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

空兩格

使用markdown排版時，很常用的需求是實現(xiàn)首行縮進，一般使用兩個全角空格&emsp$emsp來實現(xiàn)

注意

在博客園中使用markdown寫博客時，由于沒有即時顯示的功能，經(jīng)常因為多敲了幾個空格，而被解析為<br>的情況