標題一 ====== 標題二 ------
Markdown 速成
知道初學 Markdown 應該掌握的重點-產生的 HTML 及其背後的語意之後,這一節將快速走過所有 Mardown 的用法,但不會說明太多細節,目標是對 Markdown 可以做到什麼有初步的瞭解。
Tip
|
這裡只提供 Markdown 及產生的 HTML,方便觀察其間的對應關係,若要看實際在瀏覽器上的表現,把 Markdown 文件貼到 Markdown Digus 即可。 |
標題 (Header)
標題分為六級 (<h1>
~ <h6>
),前面兩級可以分別在標題下面加上一或多個等號 (=
) 跟減號 (-
)。例如:
結果:
<h1>標題一</h1> <h2>標題二</h2>
另一種寫法是在標題前面加上 1 ~ 6 個 #
,分別對應 <h1>
~ <h6>
。例如:
# 標題一 ## 標題二 ### 標題三 #### 標題四 ##### 標題五 ###### 標題六
結果:
<h1>標題一</h1> <h2>標題二</h2> <h3>標題三</h3> <h4>標題四</h4> <h5>標題五</h5> <h6>標題六</h6>
段落 (Paragraph)
連續的行會形成一個段落 (<p>
),段落之間用一或多個空白行隔開。例如:
連續的行,行1 行2 行3 會形成一個段落。 隔了一個空白行之後,又是另一個段落,行1 行2 行3
結果:
<p>連續的行,行1 行2 行3 會形成一個段落。</p> <p>隔了一個空白行之後,又是另一個段落,行1 行2 行3</p>
強調 (Emphasis)
要在一個句子裡強調某個字詞時 (<em>
),前後用 _
或 *
包夾起來即可。例如:
雞蛋不要放在_同一個_籃子裡。
結果:
<p>雞蛋不要放在<em>同一個</em>籃子裡。</p>
重點 (Importance)
要在整份文件裡突顯某一段文字的重要性時 (<strong>
),前後用 __
或 **
包夾起來即可。例如:
... **觀察 Markdown 語法產生的 HTML,是一種很好的學習方式**,可以試著調整 Markdown 的寫法,並觀察 HTML 是否會跟著產生變化,尤其是文字說明不清楚的地方,試就對了。...
結果:
<p>... <strong>觀察 Markdown 語法產生的 HTML,是一種很好的學習方式</strong>,可以試著調整 Markdown 的寫法,並觀察 HTML 是否會跟著產生變化,尤其是文字說明不清楚的地方,試就對了。...</p>
程式碼 (Code)
行內 & 區塊兩種用法
清單 (List)
連結 (Link)
連結 (<a>
) 有兩種寫法,一種是 [{link_text}](url)
,將 URL 寫在行內 (inline-style)。例如:
[在電梯裡遇見雙胞胎](https://imsardine.wordpress.com/)
另一種 [{link_text}][{link_name}]
則是把 URL 提出去 (reference-style),另外用 [{link_name}]: {url}
宣告。例如:
[在電梯裡遇見雙胞胎][myblog] [myblog]: https://imsardine.wordpress.com/
兩種寫法的結果都是:
<p><a href="https://imsardine.wordpress.com/">在電梯裡遇見雙胞胎</a></p>
圖片 (Image)
網址/郵件地址
引用 (Quotation)
跟電子郵件往返時一樣,前面整排的 >
表示引用之前的討論或其他地方的內容 (<blockquote>
)。例如:
> 腦袋不是用來裝東西,而是用來思考問題的;所以我把懶得記的、記不住的,通通寫在這裡... > > [在電梯裡遇見雙胞胎](https://imsardine.wordpress.com/)
結果:
<blockquote> <p>腦袋不是用來裝東西,而是用來思考問題的;所以我把懶得記的、記不住的,通通寫在這裡...</p> <p><a href="https://imsardine.wordpress.com/">在電梯裡遇見雙胞胎</a></p> </blockquote>