前端學Markdown
概述
Markdown的目標是實現易讀易寫,一份使用Markdown格式撰寫的文件應該可以直接以純文本發布
Markdown的語法全由一些符號所組成,它的語法種類很少,只對應HTML標記的一小部分。由於Markdown實際上就是簡化版的HTML,所以直接寫HTML也是可以的
段落
不加任何符號的一段字符,就是一個段落。多個段落之間用空行分隔
[註意]在markdown中,多個空行會合並為一個空行顯示
p1 p2 p3
輸出HTML為
<p>p1</p><p>p2</p><p>p3</p>
換行
如果段落之間沒有空行,則解析為HTML標簽<br>
p1p2 p3
輸出HTML為
<p>p1<br> p2<br> p3</p>
標題
#、##、###、####、#####、######分別對應<h1>
、<h2>
、<h3>
、<h4>
、<h5>
、<h6>
。其實我個人感覺,不如直接使用<h>
標簽方便,特別是到標題3以後
#h1##h2###h3####h4#####h5######h6
輸出HTML為
<h1>h1</h1><h2>h2</h2><h3>h3</h3><h4>h4</h4><h5>h5</h5><h6>h6</h6>
區塊
說起區塊,可能聽說的人比較少。它用‘>‘這個符號來表示,對應於HTML中的<blockquote>
標簽,用於引用塊元素。《Head first HTML And CSS》一書中,還專門針對<blockquote>
和<q>
進行了詳細的區分,但實際用的比較少
但是,markdown對應區塊引用的實現上,並不能完整表達<blockquote>
標簽的語義,應該可以引用多個段落,但實際上markdown的‘>‘符號只能引用一個段落
>p1 p2
輸出HTML為
<blockquote> <p>p1</p></blockquote><p>p2</p>
列表
【無序列表】
無序列表使用星號、加號和減號來做為列表的項目標記
* red* blue* green+ red+ blue+ green- red- blue- green
輸出HTML為
<ul> <li>red</li> <li>blue</li> <li>green</li></ul>
【有序列表】
有序的列表則是使用一般的數字接著一個英文句點作為項目標記
1. Red2. Green3. Blue
輸出HTML為
<ol> <li>red</li> <li>blue</li> <li>green</li></ol>
[註意]如果在項目之間插入空行,那項目的內容會用<p>
包起來
分隔線
可以在一行中用三個以上的星號、減號、底線來建立一個分隔線,行內不能有其他東西。也可以在星號或是減號中間插入空格。下面每種寫法都可以建立分隔線
* * *********- - - ---------------------------------------
輸出HTML為
<hr><hr><hr><hr><hr>
鏈接
Markdown支持三種形式的鏈接語法:行內、參考和自動。行內和參考鏈接都使用角括號把文字轉成鏈接
[註意]由於Markdown默認產生的鏈接是當前頁打開,且無法實現_blank,所以,就個人而言還是直接使用<a>
更方便
【行內鏈接】
行內形式是直接在後面用括號直接接上鏈接
This is an [example link](http://cnblogs.com/)
輸出HTML為
<p>This is an<a href="http://cnblogs.com/">example link</a></p>
【參考鏈接】
參考形式的鏈接可以為鏈接定一個名稱,之後可以在文件的其他地方定義該鏈接的內容。title屬性是選擇性的,鏈接名稱可以用字母、數字和空格,但是不分大小寫
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 href="http://google.com/"title="Google">Google</a> than from <a href="http://search.yahoo.com/"title="Yahoo Search">Yahoo</a> or <a href="http://search.msn.com/"title="MSN Search">MSN</a>.</p>
【直接鏈接】
Markdown支持比較簡短的自動鏈接形式來處理網址和電子郵件信箱,只要是用方括號包起來,Markdown就會自動把它轉成鏈接,鏈接的文字就和鏈接位置一樣
[註意]在網址前一定要加http://,否則將不會被識別為URL
<http://cnblogs.com/>
輸出HTML為
<a href="http://cnblogs.com/">http://cnblogs.com/</a>
圖片
圖片的語法和鏈接很像。先是一個驚嘆號!,接著一個方括號,裏面放上圖片的替代文字,接著一個普通括號,裏面放上圖片的網址,最後還可以用引號包住並加上選擇性的‘title‘文字
【行內形式】
![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】
使用反引號`來標記代碼區段<code>
,區段內的&、<和>都會被自動的轉換成HTML實體
`<p>`段落`</p>`
輸出HTML為
<code><p></code>段落<code></p></code>
【pre】
如果要建立一個已經格式化好的代碼區塊,只要每行都縮進 4 個空格或是一個 tab 就可以了,而 &、< 和 > 也一樣會自動轉成 HTML 實體
<blockquote><p>For example.</p></blockquote>
輸出HTML為
<pre><code><blockquote><p>For example.</p></blockquote></code></pre>
強調
Markdown 使用星號*和底線_作為標記強調字詞的符號,被*或_ 包圍的字詞會被轉成用 <em>
標簽包圍,用兩個* 或_包起來的話,則會被轉成<strong>
如果* 和 _ 兩邊都有空白的話,它們就只會被當成普通的符號。如果要在文字前後直接插入普通的星號或底線,可以用反斜線:
\*em* **strong*\*
輸出HTML為
<em>em</em><strong>strong</strong>
轉義
在markdown中,有一些符號具有特殊的用途,如\、*等,如果要使用它們的本意,則需要在前面加一個反斜杠\來實現
Markdown 支持以下這些符號前面加上反斜杠來幫助插入普通的符號
\ 反斜線 ` 反引號* 星號 _ 底線 {} 花括號 [] 方括號 () 括弧# 井字號+ 加號- 減號 . 英文句點 ! 驚嘆號
空兩格
使用markdown排版時,很常用的需求是實現首行縮進,一般使用兩個全角空格&emsp$emsp
來實現
註意
在博客園中使用markdown寫博客時,由於沒有即時顯示的功能,經常因為多敲了幾個空格,而被解析為<br>
的情況
前端學Markdown